資訊專(zhuān)欄INFORMATION COLUMN
摘要：里的用法，可以把理解為一個(gè)封閉的大箱子，容器里面的子元素不會(huì)影響到外面的元素。規(guī)則內(nèi)部的盒子會(huì)在垂直方向，一個(gè)個(gè)地放置。
css里的BFC用法
BFC(Block Formatting Contexts)，可以把BFC理解為一個(gè)封閉的大箱子，容器里面的子元素不會(huì)影響到外面的元素。
規(guī)則1.內(nèi)部的盒子會(huì)在垂直方向，一個(gè)個(gè)地放置。
2.BFC是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素
3.屬于同一個(gè)BFC的兩個(gè)相鄰BOx的上下margin會(huì)發(fā)生重疊
4.計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算
5.每個(gè)元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動(dòng)也是如此；
6.BFC的區(qū)域不會(huì)與float重疊；
哪些元素會(huì)觸發(fā)BFC1.body根元素
2.浮動(dòng)元素：float不為none的屬性值；
3.絕對(duì)定位元素：position（absolute、fixed）
4.display為：inline-block、table-cell、flex
5.overflow除了visible以外的值（hidden、auto、scroll）
BFC的應(yīng)用1.解決margin重疊問(wèn)題
2.解決浮動(dòng)高度塌陷問(wèn)題
3.解決侵占浮動(dòng)元素的問(wèn)題
例：
1.margin重疊問(wèn)題
我們先定義兩個(gè)垂直的div
css
.box{
width: 200px;
height: 50px;
margin: 30px 0;
background: black;
}
margin重疊后的效果
這滿(mǎn)足規(guī)則第三條：
屬于同一個(gè)BFC的兩個(gè)相鄰BOx的上下margin會(huì)發(fā)生重疊
說(shuō)明兩者屬于同一個(gè)BFC，所以我們將兩個(gè)div放到不同的BFC中，為第二個(gè)div套上一個(gè)父元素，然后通過(guò)設(shè)置overflow hidden來(lái)激活BFC
css
.content{
overflow: hidden;
}
效果圖為：
**再來(lái)看看浮動(dòng)高度塌陷問(wèn)題
**
css
.content{
width:300px;
border:1px solid black;
}
.content .box{
width:100px;
height:100px;
border:1px solid red;
float:left;
}
效果圖為：
能夠看到父元素沒(méi)有被撐開(kāi)，BFC規(guī)則第四條：
計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算
所以我們要將父元素觸發(fā)BFC
.content{
width:300px;
border:1px solid black;
overflow: hidden;
}
效果圖為：
能都看到父元素已經(jīng)撐開(kāi)了。
再來(lái)看看侵占浮動(dòng)元素的問(wèn)題
先定義兩個(gè)div：
css
.left{
width: 100px;
height: 100px;
background: salmon;
float: left;
}
.right{
width: 300px;
height: 200px;
background: black;
}
效果圖為：
滿(mǎn)足了規(guī)則第五點(diǎn)：
每個(gè)元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動(dòng)也是如此
所以我們要將紅色區(qū)域撐到黑色區(qū)域的左邊，就需利用規(guī)則第六條
BFC的區(qū)域不會(huì)與float重疊
我們給黑色區(qū)域right設(shè)置一個(gè) overflow: hidden; 屬性來(lái)觸發(fā)BFC；
.right{
width: 300px;
height: 200px;
background: black;
overflow: hidden;
}
效果圖為:
能夠看到紅色區(qū)域已經(jīng)撐到黑色區(qū)域的左邊
如果，您認(rèn)為閱讀這篇博客讓你有些收獲，請(qǐng)您關(guān)注一下。感謝您的支持，如有不足，請(qǐng)多指教。
聯(lián)系方式：
wx：bsl521921
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/114612.html
摘要：的概念比較抽象，但通過(guò)實(shí)例分析，有助于我們對(duì)的理解。在此僅列舉了幾個(gè)例子，歡迎大家一起探索更多 一、對(duì)BFC的了解 Block Formatting Contexts (BFC，塊級(jí)格式化上下文)，就是 一個(gè)塊級(jí)元素 的渲染顯示規(guī)則 （可以把 BFC 理解為一個(gè)封閉的大箱子，，容器里面的子元素不會(huì)影響到外面的元素） 二、如何觸發(fā)BFC 只要元素滿(mǎn)足下面任一條件即可觸發(fā) BFC 特性： ...
摘要：的概念比較抽象，但通過(guò)實(shí)例分析，有助于我們對(duì)的理解。在此僅列舉了幾個(gè)例子，歡迎大家一起探索更多 一、對(duì)BFC的了解 Block Formatting Contexts (BFC，塊級(jí)格式化上下文)，就是 一個(gè)塊級(jí)元素 的渲染顯示規(guī)則 （可以把 BFC 理解為一個(gè)封閉的大箱子，，容器里面的子元素不會(huì)影響到外面的元素） 二、如何觸發(fā)BFC 只要元素滿(mǎn)足下面任一條件即可觸發(fā) BFC 特性： ...
摘要：行寬的高度為包含框的高度，高度為行框中最高元素的高度。行框的寬度容納不下子元素時(shí)，子元素會(huì)換到下一行顯示，并且會(huì)產(chǎn)生新的行框。 一、BFC Block Formatting Contexts (BFC，塊級(jí)格式化上下文)，就是 一個(gè)塊級(jí)元素 的渲染顯示規(guī)則。 （可以把 BFC 理解為一個(gè)封閉的大箱子，容器里面的子元素不會(huì)影響到外面的元素）。 1、BFC的布局規(guī)則例如以下： ①.內(nèi)...
摘要：行寬的高度為包含框的高度，高度為行框中最高元素的高度。行框的寬度容納不下子元素時(shí)，子元素會(huì)換到下一行顯示，并且會(huì)產(chǎn)生新的行框。 一、BFC Block Formatting Contexts (BFC，塊級(jí)格式化上下文)，就是 一個(gè)塊級(jí)元素 的渲染顯示規(guī)則。 （可以把 BFC 理解為一個(gè)封閉的大箱子，容器里面的子元素不會(huì)影響到外面的元素）。 1、BFC的布局規(guī)則例如以下： ①.內(nèi)...
閱讀 1760·2021-09-27 14:02
閱讀 3162·2021-09-27 13:36
閱讀 1055·2019-08-30 12:46
閱讀 1842·2019-08-30 10:51
閱讀 3580·2019-08-29 17:02
閱讀 951·2019-08-29 16:38
閱讀 1854·2019-08-29 16:37
閱讀 3028·2019-08-26 10:32
