資訊專欄INFORMATION COLUMN
摘要：可以阻止元素被浮動元素覆蓋浮動元素的塊級兄弟元素會無視浮動元素的位置，盡量占滿一整行，這樣就會被浮動元素覆蓋，為該兄弟元素觸發(fā)后可以阻止這種情況的發(fā)生。
一、什么是BFC
具有BFC屬性的元素也屬于普通流定位方式，與普通容器沒有什么區(qū)別，但是在功能上，具有BFC的元素可以看做是隔離了的獨立容器，容器里面的元素不會在布局上影響到外面的元素，并且具有普通容器沒有的一些特性，比如包含浮動元素，以防止出現(xiàn)高度塌陷問題。
總之，BFC就是一種屬性，這種屬性會影響著元素的定位及與其兄弟元素之間的相互作用。
二、BFC的用途
從整體上看，BFC是隔離了的容器：
1、BFC會阻止外邊距折疊
折疊：兩個相鄰的盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的垂直外邊距可以合并成一個多帶帶的垂直外邊距。這種合并外邊距的方式被稱為折疊。
在同一個BFC中，兩個相鄰的塊級元素在垂直方向上的外邊距會發(fā)生疊加，具體的疊加規(guī)則如下：
當兩個塊級元素的外邊距都為正數(shù)時，取較大者
當兩個塊級元素的外邊距都為負數(shù)時，取較大者
當一正一負時，為兩者的和
根據(jù)上面的定義可知，發(fā)生折疊的條件是：兩個塊級元素位于同一個BFC中，因而要阻止外邊距折疊只需要產(chǎn)生新的BFC。
創(chuàng)建了BFC的元素，不和它的子元素發(fā)生外邊距折疊。 因而如果同一級中的塊級元素發(fā)生折疊情況(兄弟關(guān)系)，不能在元素本身上產(chǎn)生BFC屬性，而應(yīng)該給任意一個元素新建一個BFC容器(新增父級元素并設(shè)置為新的BFC，例如設(shè)置overflow:hidden;)。如果是祖先關(guān)系，則只需要觸發(fā)父級BFC。
A、兄弟關(guān)系外邊距折疊
/*兄弟關(guān)系阻止折疊方法*/
B、祖先關(guān)系折疊
2、BFC可以包含浮動元素
未給child加float屬性前：
給child加float屬性后：
從上面兩個對比圖可以發(fā)現(xiàn)，加了float屬性后，包含child類的div脫離普通/標準文檔流，外層div高度塌陷。
觸發(fā)BFC
使用overflow: hidden;觸發(fā)BFC屬性，就可以承載具有float屬性的元素了。
3、BFC可以阻止元素被浮動元素覆蓋
浮動元素的塊級兄弟元素會無視浮動元素的位置，盡量占滿一整行，這樣就會被浮動元素覆蓋，為該兄弟元素觸發(fā)BFC后可以阻止這種情況的發(fā)生。經(jīng)常在布局中使用。222
222
222
222
222
222
222
222
222
222
222
222
222
222
222
222
222
222
觸發(fā)BFC
三、如何觸發(fā)BFC
浮動元素：float除none以外的值
絕對定位元素：position(absolute、fixed)
display為以下其中之一的值inline-block、flex、inline-flex、table-cell、table-caption
overflow除了visible以外的值(hidden、auto、scroll)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113276.html
摘要：的全稱是塊級格式化上下文。浮動絕對定位的元素定位塊容器屬性為帶有屬性該屬性值不為和的為的塊級元素會在其內(nèi)部建立新的塊級格式化上下文。使用可以解決以下問題父子元素的上下合并問題文字圍繞浮動元素的問題和子元素浮動導(dǎo)致父元素高度為的問題。 BFC BFC的全稱是Block Format Content -- 塊級格式化上下文。浮動、絕對定位的元素(absolute、fixed定位)、塊容器(...
摘要：的全稱是塊級格式化上下文。浮動絕對定位的元素定位塊容器屬性為帶有屬性該屬性值不為和的為的塊級元素會在其內(nèi)部建立新的塊級格式化上下文。使用可以解決以下問題父子元素的上下合并問題文字圍繞浮動元素的問題和子元素浮動導(dǎo)致父元素高度為的問題。 BFC BFC的全稱是Block Format Content -- 塊級格式化上下文。浮動、絕對定位的元素(absolute、fixed定位)、塊容器(...
摘要：詳見權(quán)威指南塊級元素即塊級元素是源文檔中被格式化為塊的元素，或者屬性為的元素。概念顧名思義塊級格式化上下文。每個元素的的左邊，與包含塊的左邊相接觸對于從左往右的格式化，否則相反。 情景：浮動的高度塌陷時，使用overflow：hidden可使父元素將浮動的子元素包含起來，解決問題。但背后的原理是什么？這就是今天要談的BFC。 在將BFC之前需要先了解幾個概念： 盒子模型（Box mo...
摘要：盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習盒模型與節(jié)省復(fù)習時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內(nèi)容區(qū)盒模型主要分兩種標準盒模型盒模型怪異盒模型兩者的區(qū)別標準盒模型的寬高則為內(nèi)容區(qū)域的寬高盒模型 css盒模型與BFC 本文為收集整理總結(jié)網(wǎng)上資源 旨在系統(tǒng)復(fù)習css盒模型與bfc 節(jié)省復(fù)習時間 閱讀10分鐘 什么是盒模型 每一個文檔中，每...
閱讀 643·2023-04-25 15:49
閱讀 3099·2021-09-22 15:13
閱讀 1235·2021-09-07 10:13
閱讀 3466·2019-08-29 18:34
閱讀 2555·2019-08-29 15:22
閱讀 498·2019-08-27 10:52
閱讀 676·2019-08-26 18:27
閱讀 3008·2019-08-26 13:44
