BFC概念:
块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
产生BFC的方法:
- float有值且不为空。
- overflow有值且不为visible。
- display有值为:inline-block,table-cell,flow-root,table-caption,inline-flex中的一个。
- position有值为absolute或者fixed。
以上条件满足任意一个即可形成BFC。
BFC可以解决哪些问题:
1.避免外边距折叠。
通常情况下,外边距会取最大的那个值,这时要避免这个问题我们就可以利用BFC。
代码如下:
<style>
* {
margin: 0;
padding: 0;
}
div {
overflow: hidden;
}
.top {
width: 200px;
margin-bottom: 10px;
background: pink;
height: 200px;
}
.bottom {
height: 200px;
width: 200px;
background: red;
margin-top: 30px;
}
.bb {
overflow: hidden;
}
</style>
<div class="box">
<div class="top"></div>
<div class="bb">
<div class="bottom"></div>
</div>
</div>
效果如下:
2.避免文字环绕
解决文字环绕代码如下:
<style>
.container {
width: 300px;
height: 200px;
background: pink;
}
.floated {
height: 50px;
width: 80px;
float: left;
background: red;
}
.op {
overflow: hidden;
}
</style>
<div class="container">
<div class="floated">
Floated div
</div>
<div class="op">
<p>
Quae hic ut ab perferendis sit quod architecto,
dolor debitis quam rem provident aspernatur tempora
expedita.
</p>
</div>
</div>
效果图如下:
这个方法可以用来实现两列自适应布局,效果不错,这时候左边的宽度固定,右边的内容自适应宽度。
3.浮动元素不会乱跑。(包含浮动元素)
<style>
.out {
border: 10px solid red;
min-height: 20px;
width: 500px;
}
.in {
height: 100px;
width: 500px;
background: gray;
}
</style>
<div class="out">
<div class="in"></div>
</div>
若给in添加了浮动,则会变成如下效果:
如果在有浮动的情况下还要达到第一种效果,此时我们需要创建BFC,即在out上添加overflow: hidden;
即可。