作为一个成熟的前端程序员,你应该听过BFC这个单词了,BFC基本可以说是现在我们前端布局的一个灵魂属性了。今天我们来说一说BFC的那些事儿。
BFC是什么?
BFC
就是我们通过CSS
布局一个容器,是块级盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。容器内的布局按规则排放不会影响容器外部的布局。若是HTML
元素符合BFC
的条件,则BFC
的内部布局不会受到外部布局的影响。
BFC形成条件
- 浮动布局方式,即
float
布局除了none
属性值以外的其他布局 overflow
取(非visible
):hidden
,auto
,scroll
display
布局取值:inline-block
、table-cell
、table-caption
、flex
、inline-flex、table
、table-row
、table-row-group
、table-header-group
、table-footer-group
、flow-root
、grid
、inline-gridposition
取值:absolute
,fixed
contain
取值为layout
、content
或paint
的元素- 多列容器(
column-count
或column-width
值不为auto
,包括column-count
为1
) column-span
值为all
的元素始终会创建一个新的 BFC,即使该元素没有包裹在一个多列容器中
为什么要使用BFC?
BFC的出现本身也是为了解决问题的。
- 解决margin传递问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BFC</title>
<style>
* {
margin: 0;
}
.box1 {
width: 300px;
height: 300px;
background: skyblue;
}
.box2 {
width: 130px;
height: 130px;
background: lightgreen;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
如上,box2 的margin-top
传递到了 box1 那,即 box2 影响到了外面的元素 box1的布局,这时候,我们可以通过BFC是的box1变成一个独立的容器,其内部样式不会影响外部元素。
.box1 {
width: 300px;
height: 300px;
background: skyblue;
overflow: hidden; /* 触发了 BFC 规则,形成了独立容器 */
}
- BFC可以解决子元素浮动导致父元素高度塌陷问题
- margin重叠问题
- 防止文字环绕