BFC(Block Formatting Context)中文叫块级格式化上下文, 它是一个独立渲染的区域。它有着独立的渲染规则,它决定了块级元素如何对它的内容进行布局,以及与其他元素的关系和相互关系
BFC触发条件
- 浮动元素(float不为none)
- 绝对定位元素(position: fixed | absolute)
- overflow (auto | scroll | hidden)
- display (table-cell | table-caption | inline-block | inline-flex | flex)
- 根元素
BFC布局规则
- 内部的Box会在垂直方向,一个接一个地放置(即块级元素独占一行)。
- BFC的区域不会与float box重叠(利用这点可以实现自适应两栏布局)。
- 内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(margin重叠三个条件:同属于一个BFC;相邻;块级元素)。
- 计算BFC的高度时,浮动元素也参与计算。(清除浮动 haslayout)
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
BFC特性
阻止垂直外边距重叠
在同属于一个BFC时,两个元素会发生垂直的margin重叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC</title>
</head>
<style>
p {
background: blue;
width: 100px;
height: 100px;
margin: 100px;
}
</style>
<body>
<div>
<p>jjjj</p>
<p>hhhh</p>
</div>
</body>
</html>
在上面这个例子中,两个块元素之间的距离为100px,因为发生了margin重叠,那么怎么让它们之间的距离为200px呢?让它们不处在同一个BFC中
<style>
p {
background: blue;
width: 100px;
height: 100px;
margin: 100px;
}
.margin-overlay {
overflow: hidden;
}
</style>
<body>
<div>
<p>jjjj</p>
<div class="margin-overlay">
<p>hhhh</p>
</div>
</div>
</body>
BFC不会重叠浮动元素
可以用来实现自适应两栏布局,由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性,所以需要设置zoom:1来兼容IE6-浏览器。
<style>
.box1{
height: 100px;
width: 100px;
float: left;
background: lightblue;
}
.box2{
width: 300px;
height: 300px;
background: #eee;
}
</style>
<body>
<div class="box1">我是一个左浮动的元素</div>
<div class="box2">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
</body>
解决重叠问题,可以给box2设置overflow属性
.box2{
width: auto;
height: 300px;
background: #eee;
overflow: hidden;
/*overflow: auto;*/
}
BFC可以包含浮动元素
可以用来清除浮动
<style>
.box1 {
background: red;
}
.box2 {
width: 100px;
height: 100px;
float: left;
background: blue;
}
</style>
<body>
<div class="box1">
<div class="box2">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</div>
</body>
由于box2设置了左浮动,脱离了文档流,父元素高度塌陷。为了解决这个问题,可以给父元素触发BFC
.box1 {
background: red;
overflow: hidden;
}