一、什么是BFC
BFC全称块级格式上下文,是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
它决定了元素对其内容如何进行定位以及其他元素的关系和相互作用,当涉及到可视化布局的时候,BFC提供一个环境,html元素在这个环境中按照一定的规则进行布局。可以理解为BFC是一个独立的容器,
二、触发BFC的条件
1.根元素(html)
2.浮动元素(元素的float不是null)
3.绝对定位元素 (元素的position是absolute或fixed)
4.行内块元素(元素的display 为inline-block)
5.表格单元格 (元素的display为table-cell,html表格单元格默认为该值)
6.表格标题 (元素的display为table-caption,html表格标题默认是该值)
7.匿名表格单元格元素(元素的display为table,table-row,table-row-group,table-header-group,table-footer-group(分别是html table row,tbody,thead,tfoot的默认属性)或inline-table)
8.overflow不是visible的块元素
9.display是flow-root的元素(无任何副作用的创建BFC,新增属性)
10.contain值为layout、content、paint的元素
11.弹性元素(display为flex或inline-flex元素的直接子元素)
12.网格元素 (display为grid或inline-grid元素的直接子元素)
13多列容器(元素的column-count或column-width不为auto,包括column-count为1)
14.column-span为all的元素始终会创建一个新的BFC,即使该元素没有包括在一个多列元素中
三、BFC的作用
BFC对浮动定位和清楚浮动都很重要,浮动定位和清楚浮动只会应用于同一个BFC内的元素。浮动不会影响其他BFC中元素的布局,而清楚浮动只能清楚同一BFC中在它前面的元素的浮动。外边距折叠也只会发生在属于同一BFC的块级元素之间
实际作用:
<body>
<div class="box">
<div class="float">
float
</div>
<div class="inner">
inner
</div>
</div>
<div class="second">
other content
</div>
</body>
body中定义了两个div并列,第一个div中包含float元素和另一个div
float:left 本身就是创建BFC的条件。所以本文中float元素本身就是一个BFC元素
<style>
.box {
width: 100%;
color: pink;
border: 2px solid #444;
}
.box > .float {
height: 50px;
width: 200px;
float: left;
border: 2px solid #666;
}
.box > .inner {
display: inline;
}
.second {
width: 100%;
border: 2px solid palegreen;
}
</style>
效果:
如图float元素超出了第一个div ,覆盖了第二个div,这是我们不希望看到的,所以我们需要清楚浮动带来的影响。这是BFC的作用。
设置float元素的父元素为BFC环境,具体做法是在.box的style中添加二中触发BFC条件的属性。本例中使用overflow:hidden
.box {
width: 100%;
color: pink;
border: 2px solid #444;
overflow: hidden;
}
效果图:
然后box就和float一样高了