各位好,我是在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值得把它搞清楚嗎?我已經花太多時間在這上面了...

按讚的人:

共有 7 則留言

我晚點來研究一下 先說一點 feedback:現在幾乎都不會用到 overflow: auto; 了欸 以前排版可能偶爾會用到,現在幾乎都不會用到這屬性 通常用 flexbox 或是 position 就可以做到同樣效果

謝謝指點 避免誤會,這邊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 就能輕鬆解決

如果還是希望搞懂這段,建議你先跳過 先往後學習

之後有時間 再回頭慢慢研究

如果想看不使用 float 的寫法

可以使用 jsffidle 寫一段 float 的效果

貼上來論壇發問,我們用 flexbox & position 改寫給你看

那我就先跳過這段, 非常感謝指點學習方向

按讚的人:

我實務上沒聽過有人討論 BFC 也沒聽過這個術語,好像用不太到這個觀念

深入研究這個 不如直接開始寫一些小頁面試試看? 這邊有免費課程 https://codelove.tw/@howtomakeaturn/course/Ja6JaO