BFC(Block Formatting Context)块级格式化上下文,是一个独立的布局环境。有自己独立的渲染区域。且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。BFC布局的特点就是 将自己与外部隔离开。内部的布局不会受外部影响,外面的也不会影响内部的布局。
BFC的应用场景有哪些?
- 自适应布局
- 清除浮动
- 解决布局时盒子在垂直方向上外边距重叠问题
边距重叠:当两个box都设置了margin,那么这两个box在 垂直方向上会发生边距重叠,取绝对值较大的那个为最终值。
嵌套关系(父级关系),如果子元素设置了外边距margin,在没有给父元素设置BFC的情况下,父元素也会有外边距。解决方法就是给父元素添加 overflow:hidden。使父元素变成BFC(但是父元素的高度会发生变化)
.parentbox {
height:200px;
border: 1px solid red;
overflow: hidden;
}
.childbox {
margin: 20px;
background: #0076ff;
width: 100px;
height: 100px;
}
同级元素的重叠,取绝对值较大者
.sibling1{
background: #090a;
width: 300px;
height: 200px;
margin-bottom: 30px;
}
.sibling2{
background: #ea3f11;
width: 200px;
height: 200px;
margin-top: 10px;
}
<div class="sibling1"></div>
<div class="sibling2"></div>
如何创建一个BFC?
- overflow:hidden(auto)这种方法常用来清除浮动。
- position:absolute(fixed)这种方法会使元素脱离标准文档流,不占位置
- display:inline-block/table-cell /flex/inline-flex(不常用)
- float:left(right)这种方法会使元素脱离文档流,并且父元素也会受影响。
如何清除浮动?:
-
给父元素添加 overflow:hidden (auto)
-
在浮动元素的末尾加一个空标签 并为其设置样式 clear:both (额外标签法)(这种方法的缺点就是会增加多余的标签)
-
after伪元素清除浮动 (推荐使用)
具体代码:
.mainBox:after{
content: "";
height:0;
display: "block";
clear:both;
visibility: hidden;
overflow:hidden;
}