Block Formatting Context (Flow Root)

時間 2019-12-07

標籤 block formatting context flow root 欄目 Linux 简体版

原文原文鏈接

1. 引子

前兩天在測試overflow:hidden屬性，寫了下面一個例子：css

html<head>
<style type="text/css">
    #wrap{
        width:1000px;
        margin:0 auto;
        background-color:#FF0;
        height:200px;
        overflow:hidden;
    }
    #left{
        width:500px;
        height:400px;
        background-color:#FC8;
        float:left;
    }
</style>
</head>
<body>
    <div id="wrap">
        <div id="left"></div>
    </div>
</body>

你會發現效果是這樣的。html

我比較不理解的是，#left 已經浮動了，脫離了常規流，爲什麼 #wrap 這個外部盒子還能發揮 overflow:hidden 這個做用。css3

因而，谷歌一頓亂搜，發現了下面這個東西 Block Formatting Context（塊格式化上下文），CSS3 中也叫作 flow root。這玩意兒和引子中的問題好像沒啥關係，但以爲挺有用的，仍是寫在下面。segmentfault

2. 關於 BFC （flow root in CSS3）

我讀了各類文章，列舉比較好的幾篇：編輯器

http://w3help.org/zh-cn/kb/010/
http://kayosite.com/block-formatting-contexts-in-detail.html
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
http://www.iyunlu.com/view/css-xhtml/55.html
第一部分最後那三個名詞的官方解釋也是

關於 BFC 或者 flow root 是啥，有啥特性，就很少解釋了，上面那些文章解釋得確定比我要好。我說一下我從中的理解：ide

BFC 或者 flow root 是一個渲染的環境，與外部隔絕。不是隨便一個 div 這樣的塊級元素就能觸發的。它的觸發須要必定的條件（那些文章中都有）。

下面這兩點是不對的， BODY 並不會默認觸發 BFC。 SF的Markdown編輯器好像沒有刪除線功能，就只能先這樣表示了。當時不知道本身腦子抽風是怎麼樣想的。但願不要誤導你們。後續會對這兩點進行更正。也可參看 SF 中下面的這個問題，太牛啦。
問題測試

2. 一個 HTML Document 的 body 元素，默認觸發了一個 BFC 或者是一個 flow root。（你能夠在body裏面寫幾個有邊距的 div，看到邊距重疊，就懂了。由於邊距重疊是一個 BFC 或者 flow root 的特性。）
3. 基於第二點，不觸發 BFC 或者不是一個 flow root 的普通塊級元素，都在 '''body''' 這個 BFC 環境中。spa

若是某個元素觸發了 BFC 或者說成爲了一個 flow root，那麼這個元素將擁有新的一個 BFC環境（這使得這個元素和其兄弟元素、子元素之間的邊距等效果會發生變化，具體詳見上面文章的 BFC 特性。）

看了一圈下來，發現 BFC 確實能夠解釋不少問題，也有不少做用。如：code

「'Auto' heights for block formatting context roots」
In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges.orm

簡單來講，就是若浮動的子元素的底部在外部元素之下，那麼外部元素的高度將向下延伸，直至包裹這個浮動元素。（這也是外部容器盒中採用overflow:hidden來解決浮動帶來的外部元素高度塌陷collapse的問題。這種方法也被叫作閉合浮動）。

3. 言歸正傳

BFC 或者 flow root 好像跟 overflow:hidden 能隱藏自身的浮動子元素溢出部分的關係不大。
本來覺得隱藏溢出內容所在的子元素必須和父元素在一個流中，後來又去找了overflow:hidden隱藏溢出的資料，發現了

http://www.aliued.cn/2012/12/30/overflowhidden真的失效了嗎.html

其中指出：

一般一個盒子的內容是被限制在盒子邊界以內的。但有時也會產生溢出，即部分或所有內容跑到盒子邊界以外。溢出將在知足下列條件之一時出現：
1. 一個不換行的行元素寬度超出了容器盒子寬度。
2. 一個寬度固定的塊元素放在了比它窄的容器盒子內。
3. 一個元素的高度超出了容器盒子的高度。
4. 一個子孫元素，由負邊距值引發的部份內容在盒子外部。
5. text-indent屬性引發的行內元素在盒子的左右邊界外。
6. 一個絕對定位的子孫元素，部份內容在盒子外。但超出的部分不是總會被剪裁。子孫元素的內容就不會被子孫元素和其包含塊之間的祖先元素的overflow的設置所剪裁。

而且發現 position:absolute 的元素，也能夠被隱藏溢出。
隱藏溢出跟是否在一個流中好像沒什麼關係...ORZ...
知足上述條件的，包括絕對定位和浮動，均可以被隱藏溢出。

原本是不想寫這篇的，由於沒啥結論得出來，還繞了個大圈。但就當作是對本身發現問題，解決問題的一種鞭策吧。繼續加油！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。