各位好，我是在google搜尋CSS討論區時碰巧逛到這裡的，
如果有違規之處請多多包涵
我在Mdn網站查找關於Block formatting context的資料
(https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context)
在這邊提到創建條件：
The root element of the document ().
和BFC的特性：
With on the , everything inside that container participates in the block formatting context of that container, and floats will not poke out of the bottom of the element.
我在實作時發現如果要把body創建成BFC，要如下：
<style>
html {
overflow: auto;
}
.top {
overflow: auto;
border: 3px solid blue;
}
.bfc1 {
width: 100px;
height: 300px;
float: left;
background-color: gold;
}
</style>
</head>
<body class="top">
<div class="bfc1">bfc1</div>
</body>這樣才能實現用藍色框框把浮動一同框起來
我的疑問是，既然"The root element of the document"，為什麼我還需要overflow: auto ?
並且，html和.top二者的overflow: auto只要缺一個，就無法創建BFC，
從Mdn、W3C和各個BFC教學文章我都找不出這樣結果的原因，
但我英文差，也有可能漏掉重要的資訊
另外想問BFC值得把它搞清楚嗎?我已經花太多時間在這上面了...
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
謝謝指點
避免誤會，這邊BFC指的是Block formatting context
我overflow: auto;的目的，純粹是要嘗試創建BFC的環境，
overflow: auto;本身的功能就不太在意
我在其他教學看到BFC大概可以解決這些問題：
- float 元素的外層容器塌陷問題
- 元素間的 margin collapsing(外邊距重疊)問題
- float 元素與其他元素的重疊問題 (float 元素遮住其他元素)
有些甚至是說面試時會問BFC的概念
所以其實現在業界的前端不太會遇到這些問題，
還是說會用其他方式來處理這些問題呢?
其實我現在是購買線上課程學習前端，
該課程HTML、CSS的部分也完全沒提到BFC、IFC、GFC、FFC的功能，
我也懷疑是否因為過時，
所以課程教師覺得沒有學的必要
我真的從來沒聽過 BFC、IFC、GFC、FFC 這些名詞欸
你說的那些問題 效果 現在都用 flexbox 跟 position 就能輕鬆解決
如果還是希望搞懂這段，建議你先跳過 先往後學習
之後有時間 再回頭慢慢研究
我晚點來研究一下
先說一點 feedback：現在幾乎都不會用到
overflow: auto;了欸以前排版可能偶爾會用到，現在幾乎都不會用到這屬性
通常用 flexbox 或是 position 就可以做到同樣效果