資訊專欄INFORMATION COLUMN
摘要：一簡介全稱，塊級格式化上下文，就是一個塊級元素的渲染顯示規(guī)則可以把理解為一個封閉的大箱子，，容器里面的子元素不會影響到外面的元素二的觸發(fā)條件只要元素滿足下面任一條件即可觸發(fā)特性根元素浮動元素不為的屬性值絕對定位元素為除了以外的值三的布局
一、BFC簡介
BFC全稱：Block Formatting Contexts (BFC，塊級格式化上下文)，就是 一個塊級元素 的渲染顯示規(guī)則
（可以把 BFC 理解為一個封閉的大箱子，，容器里面的子元素不會影響到外面的元素）
body 根元素；
浮動元素：float 不為none的屬性值；
絕對定位元素：position (absolute、fixed)；
display為： inline-block、table-cell、flex；
overflow 除了visible以外的值 (hidden、auto、scroll)；
<1> 內(nèi)部的盒子會在垂直方向，一個個地放置；
<2> BFC是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然
<3> 屬于同一個BFC的 兩個相鄰Box的 上下margin會發(fā)生重疊 ；
<4> 計算BFC的高度時，浮動元素也參與計算
<5> 每個元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動也是如此；
<6> BFC的區(qū)域不會與float重疊；
<1>解決margin重疊問題
<2>解決浮動高度塌陷問題
<3>解決侵占浮動元素的問題
<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;去掉的話第二個div的margin就會和上下倆個div的margin重疊）
<2>解決浮動高度塌陷問題
代碼如下：
解決父元素高度塌陷
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;的話由于父元素沒高而子元素也由于浮動不能撐起父元素 ，父元素就會塌陷）
<3>解決侵占浮動元素的問題
代碼如下：
解決侵占浮動元素的問題
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)色的就不會被紅色的擋住
注意要給父元素divoverflow：hidden；否則當(dāng)藍(lán)色框內(nèi)容少時父元素會和藍(lán)色div一起變化）
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/52682.html
摘要：里的用法，可以把理解為一個封閉的大箱子，容器里面的子元素不會影響到外面的元素。規(guī)則內(nèi)部的盒子會在垂直方向，一個個地放置。 css里的BFC用法 BFC(Block Formatting Contexts)，可以把BFC理解為一個封閉的大箱子，容器里面的子元素不會影響到外面的元素。 規(guī)則 1.內(nèi)部的盒子會在垂直方向，一個個地放置。 2.BFC是頁面上的一個隔離的獨立容器，容器里面的子元素...
摘要：行寬的高度為包含框的高度，高度為行框中最高元素的高度。行框的寬度容納不下子元素時，子元素會換到下一行顯示，并且會產(chǎn)生新的行框。 一、BFC Block Formatting Contexts (BFC，塊級格式化上下文)，就是 一個塊級元素 的渲染顯示規(guī)則。 （可以把 BFC 理解為一個封閉的大箱子，容器里面的子元素不會影響到外面的元素）。 1、BFC的布局規(guī)則例如以下： ①.內(nèi)...
摘要：行寬的高度為包含框的高度，高度為行框中最高元素的高度。行框的寬度容納不下子元素時，子元素會換到下一行顯示，并且會產(chǎn)生新的行框。 一、BFC Block Formatting Contexts (BFC，塊級格式化上下文)，就是 一個塊級元素 的渲染顯示規(guī)則。 （可以把 BFC 理解為一個封閉的大箱子，容器里面的子元素不會影響到外面的元素）。 1、BFC的布局規(guī)則例如以下： ①.內(nèi)...
閱讀 3461·2019-08-30 13:15
閱讀 1400·2019-08-29 18:34
閱讀 822·2019-08-29 15:18
閱讀 3481·2019-08-29 11:21
閱讀 3247·2019-08-29 10:55
閱讀 3688·2019-08-26 10:36
閱讀 1869·2019-08-23 18:37
閱讀 1816·2019-08-23 16:57
