資訊專欄INFORMATION COLUMN
摘要：我們經(jīng)常寫樣式的時(shí)候會(huì)遇到垂直方向重疊的問(wèn)題，如下代碼可以看出由于，應(yīng)該顯示但是只顯示，是什么原因呢這就涉及到什么是，解釋為塊級(jí)格式化上下文一個(gè)元素要?jiǎng)?chuàng)建，則滿足下列的任意一個(gè)或多個(gè)條件即可的值不是。
我們經(jīng)常寫樣式的時(shí)候會(huì)遇到垂直方向margin重疊的問(wèn)題，如下代碼：?
first p
second p
可以看出由于margin-top:20px;margin-bottom:20px，應(yīng)該顯示40px但是只顯示20px，是什么原因呢？這就涉及到BFC
什么是BFC：Block Fromatting Context，解釋為塊級(jí)格式化上下文
一個(gè)HTML元素要?jiǎng)?chuàng)建BFC，則滿足下列的任意一個(gè)或多個(gè)條件即可：
1、float的值不是none。（float:left 或者float:right）
2、position的值不是static或者relative。（position:absolute或者position:fixed）
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible（overflow:hidden、overflow:scroll）
5、父元素與正常文件流的子元素（非浮動(dòng)子元素）自動(dòng)形成一個(gè)BFC
BFC中盒子怎么對(duì)齊
在一個(gè)BFC中，塊盒與行盒（行盒由一行中所有的內(nèi)聯(lián)元素所組成）都會(huì)垂直的沿著其父元素的邊框排列。
W3C給出得規(guī)范是：在BFC中，每一個(gè)盒子（子元素）的左外邊緣（margin-left）會(huì)觸碰到容器的左邊緣(border-left)（對(duì)于從右到左的格式來(lái)說(shuō)，則觸碰到右邊緣）。浮動(dòng)也是如此（盡管盒子里的行盒子 Line Box 可能由于浮動(dòng)而變窄）。
正常情況下一個(gè)BFC是由父元素和子元素組成的，有時(shí)候也只有一個(gè)父元素
BFC的特征
（1）所有子元素（包含浮動(dòng)元素）與容器（父元素）左邊對(duì)齊
（2）屬于同一個(gè)BFC的父元素和子元素，相鄰的父子或者兄弟間margin垂直方向會(huì)重疊，若2個(gè)元素屬于不同的BFC，則垂直方向不會(huì)重疊
（3）可以自動(dòng)撐開容器（若子元素是float的，父元素設(shè)置overflow:hidden，父元素就形成一個(gè)BFC）
防止margin重疊我們就可以從BFC的特征入手，讓2個(gè)相鄰的元素不是屬于一個(gè)BFC
first p
由于class 為second的元素外面套了一個(gè)div（一定要套一個(gè)div，因?yàn)閛verflow:hidden 是設(shè)置在父元素上，里面一定要有子元素），并設(shè)置了overflow:hidden，相當(dāng)于新創(chuàng)建了一個(gè)新的BFC, first 與second 屬于2個(gè)BFC所以margin不會(huì)重疊
另一種方法，子元素浮動(dòng)，浮動(dòng)相當(dāng)于新建了BFC,所以不會(huì)重疊
first p
second p
相鄰的子元素2個(gè)都浮動(dòng)或者下面的一個(gè)浮動(dòng)
更多前端知識(shí)請(qǐng)見(jiàn)
微信公眾號(hào)：前端之攻略
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/117015.html
摘要：二的賦值普通元素的百分比都是相對(duì)于容器的寬度計(jì)算。絕對(duì)定位元素的百分比，絕對(duì)定位元素的百分比是相對(duì)于第一個(gè)定位祖先元素的寬度計(jì)算應(yīng)用寬高自適應(yīng)矩形傳送門之所以會(huì)是，是因?yàn)榇怪狈较蛏习l(fā)生重疊。 一. margin對(duì)尺寸的影響 1.可視尺寸 a.適用于沒(méi)有設(shè)定width/height的普通block水平元素float元素、absolute/fixed元素、inline元素、table-ce...
摘要：當(dāng)一個(gè)內(nèi)聯(lián)元素想獲得就要使用這個(gè)屬性。下因?yàn)閷?dǎo)致的浮動(dòng)元素與普通元素之間產(chǎn)生代碼如下我是浮動(dòng)元素我是后面的文字，用來(lái)測(cè)試的正常情況下解決方式加一個(gè)的不只是文字，的浮動(dòng)元素也會(huì)和內(nèi)聯(lián)元素產(chǎn)生的值。設(shè)置屬性的元素不和任何元素發(fā)生合并。 發(fā)現(xiàn)我好久沒(méi)更新博文了=-=這里把我之前在博客園寫過(guò)的一篇關(guān)于BFC的文章粘貼過(guò)來(lái)，順便自己也再次做個(gè)總結(jié)。 最近看了一篇總結(jié)ie常見(jiàn)bug的文章，里面提...
摘要：當(dāng)一個(gè)內(nèi)聯(lián)元素想獲得就要使用這個(gè)屬性。下因?yàn)閷?dǎo)致的浮動(dòng)元素與普通元素之間產(chǎn)生代碼如下我是浮動(dòng)元素我是后面的文字，用來(lái)測(cè)試的正常情況下解決方式加一個(gè)的不只是文字，的浮動(dòng)元素也會(huì)和內(nèi)聯(lián)元素產(chǎn)生的值。設(shè)置屬性的元素不和任何元素發(fā)生合并。 發(fā)現(xiàn)我好久沒(méi)更新博文了=-=這里把我之前在博客園寫過(guò)的一篇關(guān)于BFC的文章粘貼過(guò)來(lái)，順便自己也再次做個(gè)總結(jié)。 最近看了一篇總結(jié)ie常見(jiàn)bug的文章，里面提...
摘要：屬性指定了盒的區(qū)的寬度。簡(jiǎn)寫屬性一次性設(shè)置四周的，而其它屬性只設(shè)置它們各側(cè)的。 margin屬性指定了盒的margin區(qū)的寬度。margin簡(jiǎn)寫屬性一次性設(shè)置四周的margin，而其它margin屬性只設(shè)置它們各側(cè)的。這些屬性適用于所有元素，但非替換行內(nèi)元素上的豎直margin將不會(huì)產(chǎn)生任何效果 margin與容器尺寸 margin與可視尺寸 margin與可視尺寸 只適用于沒(méi)有設(shè)定...
摘要：而就潛藏在其中，當(dāng)你修改樣式時(shí)，一不小心就能觸發(fā)它而毫無(wú)察覺(jué)，因此沒(méi)有意識(shí)到的神奇之處。實(shí)例解決侵占浮動(dòng)元素的問(wèn)題我們知道浮動(dòng)元素會(huì)脫離文檔流，然后浮蓋在文檔流元素上。 在寫樣式時(shí)，往往是添加了一個(gè)樣式，又或者是修改了某個(gè)屬性，就達(dá)到了我們的預(yù)期。而BFC就潛藏在其中，當(dāng)你修改樣式時(shí)，一不小心就能觸發(fā)它而毫無(wú)察覺(jué)，因此沒(méi)有意識(shí)到BFC的神奇之處。 一、什么是BFC（Block Form...
閱讀 1269·2021-09-23 11:51
閱讀 1385·2021-09-04 16:45
閱讀 630·2019-08-30 15:54
閱讀 2080·2019-08-30 15:52
閱讀 1599·2019-08-30 11:17
閱讀 3104·2019-08-29 13:59
閱讀 2014·2019-08-28 18:09
閱讀 386·2019-08-26 12:15
