BFC 定义
BFC 全称 Block Formatting Context，块级格式化上下文。
一个 BFC 是网页中某个独立的 CSS 渲染区域。
w3c 对 BFC 定义
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文。
在一个块级格式化上下文里，盒子从包含块的顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的 margin 值所决定的。两个相邻的块级盒子的垂直外边距会发生叠加。
在块级格式化上下文中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此，除非这个盒子创建一个新的块级格式化上下文。
BFC 的产生
- 根元素或包含它的其他元素
- 浮动元素
-
position: absolute和position: fixed的元素 -
display: inline-block的元素 -
overflow被设置成visible外的值的块状元素 -
<td>和display: table-cell的元素 -
<caption>和display: table-caption的元素 -
display: flow-root的元素 -
column-span: all的元素
BFC 特性
1.内部的Box会在垂直方向，从顶部开始一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。
3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float box叠加。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
6.计算BFC的高度时，浮动元素也参与计算。
解决margin 合并问题
我们可以把目标元素外层添加一个 div 元素，设置 div 的border-top、padding-top、overflow:hidden、display:inline-block和display:flex。
// HTML
<p>hello world</p>
<p>hello world</p>
// CSS
p {
color:black;
background: #FF0000;
width: 200px;
line-height: 100px;
text-align:center;
margin: 30px;
}
两个p元素每个p之间的距离为30px，发生了外边距合并。 要解决这个合并问题即让每个P之间是60px，我们可以新建一个BFC，怎么建呢？可以给p元素添加一个父元素，让它触发BFC。
// HTML
<p>hello world</p>
<div>
<p>hello world</p>
</div>
// CSS
p {
color:black;
background: #FF0000;
width: 200px;
line-height: 100px;
text-align:center;
margin: 30px;
}
div{
overflow:hidden;
}
抑制浮动
// HTML
<div class="aside"></div>
<div class="main"></div>
// CSS
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: blue;
}
.main {
height: 200px;
background: #f00;
}
创建一个新的BFC来解决这个问题，让其内容消除对外界浮动元素的影响。给 main 类创建一个BFC,使其不受浮动的影响。
// CSS
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: blue;
}
.main {
height: 200px;
background: #f00;
overflow:hidden;
}
使用 BFC 实现了我们想要的两栏布局
包含浮动
// HTML
<div class="BFC">
<div class="box"></div>
<div class="box"></div>
</div>
// CSS
.BFC {
border: 3px solid red;
width: 300px;
}
.box {
border: 3px solid blue;
width: 100px;
height: 100px;
float: left;
}
由于子元素浮动脱离了文档流，父元素无法包含住子元素，触发父元素的 BFC，让父元素包含两个子元素。
// CSS
.BFC {
border: 3px solid red;
width: 300px;
overflow:hidden;
}
.box {
border: 3px solid blue;
width: 100px;
height: 100px;
float: left;
}
网友评论