一、BFC介绍
BFC(Block fomatting context)“块级格式化上下文”。是Web页面中盒模型布局的CSS渲染模式,是一个独立的渲染区域,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
二、形成BFC的条件
1、根元素
2、float属性不为none
3、position为absolute或fixed
4、display为inline-block, table-cell, table-caption, flex, inline-flex
5、overflow除了visible以外的(hidden,auto,scroll)
三、BFC布局规则:
1、内部的Box会在垂直方向,一个接一个地放置。
例:html:
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
css:
div {
height: 20px;
}
.container {
position: absolute; /* 创建一个BFC环境*/
height: auto;
background-color: #eee;
}
.box1 {
width: 400px;
background-color: red