資訊專欄INFORMATION COLUMN
寫頁面時會遇到：
子元素float父元素的高度不會撐開;
在布局時，box1and box2,其中box1 float：left，這是box2會在box1下面，(如果文字過多就會形成文字環(huán)繞效果)，但我就是想要box2在box1的右側(cè);
又或是上下兩個box的margin重疊。
這些問題除了其他一些方法解決外，都可以利用加上overflow:hidden，但是why?其實(shí) BFC的作用呢。
BFC??啥？
BFC這個詞....
BFC：全稱box formatting context;即塊格式上下文，block-level元素參與；
那么什么是block-level呢？
等等 等等...
"W3C" CSS2.1規(guī)范：
Block-level elements?are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the?"display"property make an element block-level: "block", "list-item", and "table".
塊級元素是源文檔中被視為塊（例如段落）可視化格式的那些元素。 "display"屬性的以下值構(gòu)成一個塊級別："block"，"list-item"和"table"。
那它是怎么形成的呢？
以下情況之一：
float值不為none
position:fixed / absolute
display:table-cell / table-caption /inline-block / flex / inline-flex.
overflow屬性不為visible
我們知道了什么是BFC,如何形成BFC，接下來就要說BFC的布局規(guī)則啦
滴滴滴...
內(nèi)部的box會一個接一個地垂直布局。
兩個相鄰box的垂直距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
每個盒子的左外邊框緊挨著左邊框的包含塊(從左往右的格式化時，否則相反)。即使存在浮動也是如此
BFC的區(qū)域不會與float box重疊。
BFC就是頁面上的一個隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算.
該知道的理論也差不多了，該解答了~
問題1：子元素float父元素的高度不會撐開
效果：
我們看到container只是right的高，而left中float使該元素脫離了文檔流它的高沒有計算在內(nèi)，現(xiàn)在要想left的高度計算在內(nèi)，根據(jù)BFC布局規(guī)則6就可以，形成一個BFC區(qū)不就可以計算float的高度嘍，來，上碼：
.container{
color:#FFF;
width: 300px;
margin:100px auto;
border:1px solid #330033;
overflow: hidden;
}
果真嘿，其實(shí)，這里不止加overflow：hidden,加上邊介紹任何一種可以形成BFC區(qū)奏行，比如：overflow: auto; / float: left; /display: flex;等等，根據(jù)項目中的實(shí)際需求。
2.問題2：box2在box1右側(cè)
在問題1里的代碼基礎(chǔ)上，把right區(qū)增加一個高度比如300px，就可以看到效果liu
.right{
background: #FFCCFF;
height: 300px;
overflow: hidden;
}
由于left塊float的原因，導(dǎo)致right在left下面，解決此問題
根據(jù)BFC布局規(guī)則4 ：BFC的區(qū)域不會與float box重疊，那么right形成BFC區(qū)
效果：
哇，好了呀！
問題3：magin重疊問題
我們大多以為是80px，可結(jié)果卻是50px!
why?
BFC原則2指明了同一個BFC區(qū)的margin垂直重疊，不在同一個是不是就不重疊了，來來來
...
.wrapper{
overflow:hidden;
}
...
我是box1
我是box2
ok!通過給box1或box2添加一個父元素形成和另一個不在同一區(qū)。
關(guān)于垂直margin折疊
兩個相鄰的外邊距都是正數(shù)時，折疊結(jié)果是它們兩者之間較大的值;
兩個相鄰的外邊距都是負(fù)數(shù)時，折疊結(jié)果是兩者絕對值的較大值;
兩個外邊距一正一負(fù)時，折疊結(jié)果是兩者的相加的和;
最后的最后，歡迎指正~
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51935.html
摘要：布局中有一些概念，一旦你理解了它們，就能真正提高你的布局能力。我們通常有兩種方法來解決這個布局問題。是布局中的一個迷你布局你可以將看作是頁面內(nèi)的一個迷你布局。理解瀏覽器如何布置網(wǎng)頁是非?；A(chǔ)的。 CSS布局中有一些概念，一旦你理解了它們，就能真正提高你的 CSS 布局能力。本文是關(guān)于塊格式化上下文(BFC)的。你可能從未聽說過這個術(shù)語，但是如果你曾經(jīng)用CSS做過布局，你可能知道它是什么...
摘要：當(dāng)一個內(nèi)聯(lián)元素想獲得就要使用這個屬性。下因?yàn)閷?dǎo)致的浮動元素與普通元素之間產(chǎn)生代碼如下我是浮動元素我是后面的文字，用來測試的正常情況下解決方式加一個的不只是文字，的浮動元素也會和內(nèi)聯(lián)元素產(chǎn)生的值。設(shè)置屬性的元素不和任何元素發(fā)生合并。 發(fā)現(xiàn)我好久沒更新博文了=-=這里把我之前在博客園寫過的一篇關(guān)于BFC的文章粘貼過來，順便自己也再次做個總結(jié)。 最近看了一篇總結(jié)ie常見bug的文章，里面提...
摘要：當(dāng)一個內(nèi)聯(lián)元素想獲得就要使用這個屬性。下因?yàn)閷?dǎo)致的浮動元素與普通元素之間產(chǎn)生代碼如下我是浮動元素我是后面的文字，用來測試的正常情況下解決方式加一個的不只是文字，的浮動元素也會和內(nèi)聯(lián)元素產(chǎn)生的值。設(shè)置屬性的元素不和任何元素發(fā)生合并。 發(fā)現(xiàn)我好久沒更新博文了=-=這里把我之前在博客園寫過的一篇關(guān)于BFC的文章粘貼過來，順便自己也再次做個總結(jié)。 最近看了一篇總結(jié)ie常見bug的文章，里面提...
摘要：而就潛藏在其中，當(dāng)你修改樣式時，一不小心就能觸發(fā)它而毫無察覺，因此沒有意識到的神奇之處。實(shí)例解決侵占浮動元素的問題我們知道浮動元素會脫離文檔流，然后浮蓋在文檔流元素上。 在寫樣式時，往往是添加了一個樣式，又或者是修改了某個屬性，就達(dá)到了我們的預(yù)期。而BFC就潛藏在其中，當(dāng)你修改樣式時，一不小心就能觸發(fā)它而毫無察覺，因此沒有意識到BFC的神奇之處。 一、什么是BFC（Block Form...
閱讀 896·2023-04-26 00:11
閱讀 2689·2021-11-04 16:13
閱讀 2147·2021-09-09 09:33
閱讀 1507·2021-08-20 09:35
閱讀 3887·2021-08-09 13:42
閱讀 3637·2019-08-30 15:55
閱讀 1128·2019-08-30 15:55
閱讀 2254·2019-08-30 13:55
