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