BFC的含义 :
Block Formatting Contexts(BFC) : 块级元素格式化上下文
它决定了块级元素如何对它的内容进行布局,以及与其他元素的关系和相互关系
块级元素:父级(是一个块元素)
内容:子元素(是一个块元素)
其他元素:与内容同级别的兄弟元素
相互作用:BFC里的元素与外面的元素不会发生影响
触发条件 :
-
根元素或包含根元素的元素
-
浮动元素(元素的 float 不是 none)
-
绝对定位元素(元素的 position 为 absolute 或 fixed)
-
行内块元素(元素的 display 为 inline-block)
-
表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值)
-
表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
-
匿名表格单元格元素(元素的 display为 table、
table-row、 table-row-group、
table-header-group、``table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table) -
overflow 值不为 visible 的块元素
-
display 值为 flow-root 的元素
-
contain 值为 layout、content或 strict 的元素
-
弹性元素(display为 flex 或 inline-flex元素的直接子元素)
-
网格元素(display为 grid 或 inline-grid 元素的直接子元素)
-
多列容器(元素的 column-count 或 column-width 不为 auto,包括 ``column-count 为 1)
-
column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。
BFC的特点
在一个BFC中,垂直方向上,盒子是从包含块顶部开始一个挨着一个布局的,两个相邻的盒子的垂直距离是由margin属性决定的,在一个BFC中的两个相邻的块级盒子的垂直外边距会产生塌陷。
在一个BFC中,水平方向上,每个盒子的左边缘都会接触包含块的左边缘(从右向左的格式则相反)。除非出现浮动元素和其他元素相互作用的情况(当有浮动元素时,行盒可能因浮动元素而收缩,如果有盒子形成了新的BFC,那这个盒子也可能因浮动元素而变窄)。
这样我们终于知道为什么《精通CSS》里提到外边距塌陷时,为什么设置这么多的条件了:
处于文档流中的块级元素
垂直外边距直接相遇
其中第一个条件就是为了防止形成BFC,我们要注意的是BFC内部的子元素之间可以形成外边距塌陷,但BFC元素和其他块级元素是不能形成外边距塌陷的。
应用场景
自适应两栏布局
<style>
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
清除浮动
<style>
.par {
border: 5px solid #fcc;
width: 300px;
overflow:hidden;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
防止垂直 margin 重叠
<style>
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<p>Hehe</p>
</body>