BFC——格式化上下文。
这到底是个啥?
首先来回顾一下css定位机制。
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。 BFC属于普通流。
具有 BFC 特性的元素可以看作是隔离了的独立容器,是一个独立的渲染区域。简单来说就是一个独立的盒子,并且这个盒子里的布局不受外部影响,也不会影响到外部元素。
具有BFC特性的容器有以下特点:
- Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠。
- BFC是页面一个独立的容器,容器里面的元素不会影响到外面的元素,反之亦然。
- 计算BFC的高度时,浮动元素也会参与计算。
- BFC内部的盒子Box会在垂直方向,一个接一个地放置。
- BFC的区域不会与浮动盒子float box重叠。
哪些情况可以触发BFC?
- body根元素。
- float属性不为none,也就是left/right。
- position为absolute或fixed。
- display为inline-block, table-cell, table-caption, flex, inline-flex。
- overflow不为visible,也就是auto/hidden。
BFC可以解决什么问题?
- 清除浮动
回顾一下我们为啥要清除浮动?主要是为了避免出现父元素高度塌陷的问题。
高度塌陷示例:
<html>
<head>
<title>test</title>
<style type="text/css">
.father {
border: #000 1px solid;
}
.child {
float: left;
}
.child1 {
background: red;
width: 200px;
height: 200px;
}
.child2 {
background: blue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="father">
<div class="child child1"></div>
<div class="child child2"></div>
</div>
</body>
</html>
我们把父元素的边框设置为黑色、1px,但发现父元素中的子元素没有被这个边框包裹起来,出现了高度坍塌。
解决办法之一是使用clear:both
来清除浮动:
<html>
<head>
<title>test</title>
<style type="text/css">
.father {
border: #000 1px solid;
}
.child {
float: left;
}
.child1 {
background: red;
width: 200px;
height: 200px;
}
.child2 {
background: blue;
width: 200px;
height: 200px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="child child1"></div>
<div class="child child2"></div>
<div class="clear"></div>
</div>
</body>
</html>
可以看到,问题解决了。
另一个方法是把父元素变成BFC容器,给父元素加上overflow:hidden
的样式:
<html>
<head>
<title>test</title>
<style type="text/css">
.father {
border: #000 1px solid;
overflow: hidden;
}
.child {
float: left;
}
.child1 {
background: red;
width: 200px;
height: 200px;
}
.child2 {
background: blue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="father">
<div class="child child1"></div>
<div class="child child2"></div>
</div>
</body>
</html>
- 边距重叠问题
<html>
<head>
<title>test</title>
<style type="text/css">
.box1 {
background: blue;
width: 200px;
height: 200px;
margin: 20px;
}
.box2 {
background: red;
width: 200px;
height: 200px;
margin: 20px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
问:box1和box2的间隔有多宽?20+20=40(px)?,错了,因为发生了边距重叠,所以两者之间的间隔只有20px。
出现问题的原因是:box1和box2同属于BFC容器body,属于同一个BFC的两个相邻Box的margin会发生重叠。
那么解决方法显而易见:把它们放在不同的BFC里面就ok了。
<html>
<head>
<title>test</title>
<style type="text/css">
.bfc {
overflow: hidden;
}
.box1 {
background: blue;
width: 200px;
height: 200px;
margin: 20px;
}
.box2 {
background: red;
width: 200px;
height: 200px;
margin: 20px;
}
</style>
</head>
<body>
<div class="bfc">
<div class="box1"></div>
</div>
<div class="bfc">
<div class="box2"></div>
</div>
</body>
</html>
- 防止被浮动元素覆盖
<html>
<head>
<title>test</title>
<style type="text/css">
.box2 {
background: red;
width: 100px;
height: 100px;
float: left;
}
.box1 {
background: blue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box2"></div>
<div class="box1"></div>
</body>
</html>
box1被浮动元素box2盖住了。
把box1改为BFC试试:
<html>
<head>
<title>test</title>
<style type="text/css">
.box2 {
background: red;
width: 100px;
height: 100px;
float: left;
}
.box1 {
background: blue;
width: 200px;
height: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box2"></div>
<div class="box1"></div>
</body>
</html>
现在两者是并列的,box1不会被覆盖。