資訊專欄INFORMATION COLUMN
摘要：一簡(jiǎn)介全稱，塊級(jí)格式化上下文，就是一個(gè)塊級(jí)元素的渲染顯示規(guī)則可以把理解為一個(gè)封閉的大箱子，，容器里面的子元素不會(huì)影響到外面的元素二的觸發(fā)條件只要元素滿足下面任一條件即可觸發(fā)特性根元素浮動(dòng)元素不為的屬性值絕對(duì)定位元素為除了以外的值三的布局
一、BFC簡(jiǎn)介
BFC全稱：Block Formatting Contexts (BFC，塊級(jí)格式化上下文)，就是 一個(gè)塊級(jí)元素 的渲染顯示規(guī)則
（可以把 BFC 理解為一個(gè)封閉的大箱子，，容器里面的子元素不會(huì)影響到外面的元素）二、BFC的觸發(fā)條件（只要元素滿足下面任一條件即可觸發(fā) BFC 特性）
body 根元素；
浮動(dòng)元素：float 不為none的屬性值；
絕對(duì)定位元素：position (absolute、fixed)；
display為： inline-block、table-cell、flex；
overflow 除了visible以外的值 (hidden、auto、scroll)；
三、BFC的布局規(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重疊；
<1>解決margin重疊問題
<2>解決浮動(dòng)高度塌陷問題
<3>解決侵占浮動(dòng)元素的問題
<1>解決margin重疊問題
代碼如下：
解決margin重疊
body{
margin:0 auto;
}
.box{
overflow:hidden;
}
.one{
height:50px;
background-color:red;
margin:20px 0;
}
.two{
height:50px;
background-color:red;
margin:20px 0;
}
.three{
height:50px;
background-color:red;
margin:20px 0;
}
效果圖如下：
（若將box中的overflow:hiffffden;去掉的話第二個(gè)div的margin就會(huì)和上下倆個(gè)div的margin重疊）
<2>解決浮動(dòng)高度塌陷問題
代碼如下：
解決父元素高度塌陷
body{
margin:0 auto;
}
.box{
overflow:hidden;
width:500px;
background-color:yellow;
margin:0 auto;
}
.one{
height:50px;
width:100px;
background-color:red;
float:left;
}
.two{
height:100px;
width:200px;
background-color:blue;
float:right;
}
效果圖如下：
圖片描述
（不給父元素overflow:hiffffden;的話由于父元素沒高而子元素也由于浮動(dòng)不能撐起父元素 ，父元素就會(huì)塌陷）
<3>解決侵占浮動(dòng)元素的問題
代碼如下：
解決侵占浮動(dòng)元素的問題
akehfakwehfaie
akehfakwehfaie
akehfakwehfaie
akehfakwehfaie
akehfakwehfaie
akehfakwehfaie
body{
margin:0 auto;
}
.box{
overflow:hidden;
width:700px;
background-color:yellow;
margin:0 auto;
}
.one{
height:100px;
width:150px;
background-color:red;
float:left;
}
.two{
height:170px;
background-color:blue;
/* float:left; */
overflow:hidden;
}
（這里是將紅色div左浮給藍(lán)色的divoverflow：hidden；藍(lán)色的就不會(huì)被紅色的擋住
注意要給父元素divoverflow：hidden；否則當(dāng)藍(lán)色框內(nèi)容少時(shí)父元素會(huì)和藍(lán)色div一起變化）
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/113523.html
摘要：里的用法，可以把理解為一個(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ú)立容器，容器里面的子元素...
摘要：行寬的高度為包含框的高度，高度為行框中最高元素的高度。行框的寬度容納不下子元素時(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)...
閱讀 2135·2021-09-29 09:35
閱讀 761·2021-09-08 09:36
閱讀 3464·2021-09-03 10:30
閱讀 2174·2019-08-30 14:21
閱讀 2992·2019-08-30 11:18
閱讀 3377·2019-08-29 17:31
閱讀 3202·2019-08-29 17:29
閱讀 1366·2019-08-29 17:13
