資訊專欄INFORMATION COLUMN
摘要：后續(xù)會對這兩點進行更正。這也是外部容器盒中采用來解決浮動帶來的外部元素高度塌陷的問題。溢出將在滿足下列條件之一時出現(xiàn)一個不換行的行元素寬度超出了容器盒子寬度。一個元素的高度超出了容器盒子的高度。
1. 引子
前兩天在測試overflow:hidden屬性，寫了下面一個例子：
html
你會發(fā)現(xiàn)效果是這樣的。
我比較不理解的是，#left 已經浮動了，脫離了常規(guī)流，為何 #wrap 這個外部盒子還能發(fā)揮 overflow:hidden 這個作用。
于是，谷歌一頓亂搜，發(fā)現(xiàn)了下面這個東西 Block Formatting Context（塊格式化上下文），CSS3 中也叫做 flow root。這玩意兒和引子中的問題好像沒啥關系，但覺得挺有用的，還是寫在下面。
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 是啥，有啥特性，就不多解釋了，上面那些文章解釋得肯定比我要好。我說一下我從中的理解：
BFC 或者 flow root 是一個渲染的環(huán)境，與外部隔絕。不是隨便一個 div 這樣的塊級元素就能觸發(fā)的。它的觸發(fā)需要一定的條件（那些文章中都有）。
下面這兩點是不對的， BODY 并不會默認觸發(fā) BFC。 SF的Markdown編輯器好像沒有刪除線功能，就只能先這樣表示了。當時不知道自己腦子抽風是怎么樣想的。希望不要誤導大家。后續(xù)會對這兩點進行更正。也可參看 SF 中下面的這個問題，太牛啦。
問題
2. 一個 HTML Document 的 body 元素，默認觸發(fā)了一個 BFC 或者是一個 flow root。（你可以在body里面寫幾個有邊距的 div，看到邊距重疊，就懂了。因為邊距重疊是一個 BFC 或者 flow root 的特性。）
3. 基于第二點，不觸發(fā) BFC 或者不是一個 flow root 的普通塊級元素，都在 """body""" 這個 BFC 環(huán)境中。
如果某個元素觸發(fā)了 BFC 或者說成為了一個 flow root，那么這個元素將擁有新的一個 BFC環(huán)境（這使得這個元素和其兄弟元素、子元素之間的邊距等效果會發(fā)生變化，具體詳見上面文章的 BFC 特性。）
看了一圈下來，發(fā)現(xiàn) BFC 確實可以解釋很多問題，也有很多作用。如：
“"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.
簡單來說，就是若浮動的子元素的底部在外部元素之下，那么外部元素的高度將向下延伸，直至包裹這個浮動元素。（這也是外部容器盒中采用overflow:hidden來解決浮動帶來的外部元素高度塌陷collapse的問題。這種方法也被叫做閉合浮動）。
3. 言歸正傳BFC 或者 flow root 好像跟 overflow:hidden 能隱藏自身的浮動子元素溢出部分的關系不大。
原本以為隱藏溢出內容所在的子元素必須和父元素在一個流中，后來又去找了overflow:hidden隱藏溢出的資料，發(fā)現(xiàn)了
http://www.aliued.cn/2012/12/30/overflowhidden真的失效了嗎.html
其中指出：
通常一個盒子的內容是被限制在盒子邊界之內的。但有時也會產生溢出，即部分或全部內容跑到盒子邊界之外。溢出將在滿足下列條件之一時出現(xiàn)：
1. 一個不換行的行元素寬度超出了容器盒子寬度。
2. 一個寬度固定的塊元素放在了比它窄的容器盒子內。
3. 一個元素的高度超出了容器盒子的高度。
4. 一個子孫元素，由負邊距值引起的部分內容在盒子外部。
5. text-indent屬性引起的行內元素在盒子的左右邊界外。
6. 一個絕對定位的子孫元素，部分內容在盒子外。但超出的部分不是總會被剪裁。子孫元素的內容就不會被子孫元素和其包含塊之間的祖先元素的overflow的設置所剪裁。
并且發(fā)現(xiàn) position:absolute 的元素，也可以被隱藏溢出。
隱藏溢出跟是否在一個流中好像沒什么關系...ORZ...
滿足上述條件的，包括絕對定位和浮動，都可以被隱藏溢出。
本來是不想寫這篇的，因為沒啥結論得出來，還繞了個大圈。但就當做是對自己發(fā)現(xiàn)問題，解決問題的一種鞭策吧。繼續(xù)加油！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111022.html
摘要：參考在講之前，先來了解一下規(guī)范里面的一個關于元素的定位規(guī)則主要有三種常規(guī)文檔流，浮動，絕對定位。而這些值都是相對其父元素來說的。在上面的第一點里面我們已經提到了一個概念叫。 參考：https://www.w3.org/TR/CSS21/v...在講BFC之前，先來了解一下CSS2.1規(guī)范里面的一個關于元素的定位規(guī)則(positioning schemes),主要有三種：常規(guī)文檔流，浮動...
摘要：指頁面中一個渲染區(qū)域，并且擁有一套渲染規(guī)則，他決定了其子元素如何定位，以及與其他元素的相互關系和作用。兩個同胞盒間的垂直距離取決于屬性。同一個塊格式化上下文中的相鄰塊級盒的垂直外邊距將折疊。 FC（Formatting Context）指頁面中一個渲染區(qū)域，并且擁有一套渲染規(guī)則，他決定了其子元素如何定位，以及與其他元素的相互關系和作用。常見的FC有BFC、IFC，GFC和FFC。 BF...
摘要：我們可以注意定義中的幾個關鍵字毗鄰兩個或多個垂直方向和普通流。如何避免外邊距疊加上面講了外邊距的疊加，那如何避免呢，其實只要破壞上面講到的四個條件中的任何一個即可毗鄰兩個或多個普通流和垂直方向。 外邊距疊加一直是前端開發(fā)必須了解的一個概念，面試一般也會問到這個問題。所以整理一下相關外邊距疊加相關的知識點。外邊距疊加是什么？什么時候會發(fā)生外邊距疊加？如何避免外邊距疊加？ 什么是外邊距疊加...
摘要：這個沒有起作用對的設定后，就失效了，而元素就以正常的形式呈現(xiàn)。五的描述盒位置根據正常流計算這稱為正常流動中的位置，然后相對于該元素在流中的和最近的塊級祖先元素定位。在所有情況下即便被定位元素為時，該元素定位均不對后續(xù)元素造成影響。關于CSS position，來自MDN的描述： CSS position屬性用于指定一個元素在文檔中的定位方式。top、right、bottom、left屬性則...
摘要：是指塊級元素，就是會強制換行的元素，比如。將元素推向左側。請根據不同的實際情況，選擇最合適的方式。再次重申一下，是為子元素創(chuàng)建定位環(huán)境。，由于浮動元素占據了一定的寬度，新創(chuàng)建的會因此而變窄。這里只是為了更好地去理解而做一個例子。 什么是 BFC W3C 為瀏覽器規(guī)定了三種定位模型：Normal Flow, 浮動, 和絕對定位。本文所介紹的 BFC (Block Formatting M...
閱讀 4391·2021-11-19 09:59
閱讀 3318·2021-10-12 10:12
閱讀 2630·2021-09-22 15:25
閱讀 3320·2019-08-30 15:55
閱讀 1182·2019-08-29 11:27
閱讀 1463·2019-08-28 18:06
閱讀 2735·2019-08-26 13:41
閱讀 2554·2019-08-26 13:41
