我们可以把块格式化上下文(BFC)想象成一个封闭的大容器。
这个大容器有以下几个重要特点:
- 容器内部的元素无论如何翻腾,都不会影响到外部的元素。就像城墙一样,把内部和外部隔离开。
- 容器会在垂直方向上,合并容器内相邻的浮动元素间的间隙。如果容器内有一行文字,下一行一个左浮动的盒子,BFC会把盒子上浮,文字围绕其流动。这样就没间隙了。
- 容器的外边距不会与浮动元素重叠。浮动元素其实也是定位了(relative 或 absolute),但是相对定位元素或绝对定位元素的外边距,可能会与其他盒子的外边距重叠。这给我们定位元素布局带来一定麻烦。BFC 就规定了浮动元素不会发生外边距的重叠。
- 计算BFC高度时,子元素的浮动也会被考虑进去。也就是说,浮动元素影响了BFC的高度。如果不考虑浮动,BFC的高度就受影响了。
- BFC可以理解成一个上下文环境,在这个环境中的元素,布局不会影响到外部的元素。反之亦然。
所以,BFC内部元素无论变化多大,都不会波及外部环境。这就像一个独立的世界,世界内部怎么乱,外部稳定就行。
我们知道网页是基于流式布局的,元素会默认在页面上按照顺序垂直排列。BFC就像一个容器,可以隔离元素的流式布局,使得这个容器(BFC)成为一个单独的布局环境。
我们举几个具体的例子:
-
浮动元素和标准流元素重叠的问题
当一个标准流元素后面跟着一个浮动元素时,标准流元素可能会跟浮动元素发生重叠。这时我们可以把标准流元素装进一个BFC容器,这个容器内排版不会影响外面,所以就避免了元素的重叠。 -
外边距折叠问题
有时候两个盒子的外边距会发生折叠(合并),这时同样可以用BFC避免。把其中一个盒子装进BFC,那么它就不会与外面的盒子 margin发生折叠。 -
清除浮动影响
当一个容器中有浮动元素时,容器的高度会塌陷。这时我们通过在容器中创建BFC,BFC会自动包含浮动元素,这样容器的高度就会正常了。
简单说,BFC就是一个作用域,让容器变成一个独立的布局环境,内外元素互不影响,这样就解决了很多布局问题。
容器塌陷是指,当容器内有浮动元素时,容器无法检测到浮动元素的高度,从而导致容器高度坍塌。
举个例子:
html
<div class="container">
<div class="left"></div>
</div>
css
Copy code
.left {
float: left;
height: 100px;
}
这里左侧是一个浮动元素left,高度100px。但是它的父容器container并不知道left的高度,container认为自己内部已经没有元素了。
这时container的高度就会变成0,内容塌陷掉了。页面效果就是右侧的内容会直接上移,和左浮动的div发生重叠。
我们可以通过清除浮动的方法来修复这个问题:
触发container生成BFC,使其可以清除内部浮动
给container添加overflow: hidden
使用clear: both清除浮动影响
这就是“容器塌陷”的含义,是浮动元素带来的常见问题之一。
首先,需要明确的是——浮动元素是脱离普通文档流的,浮动后,元素会向左或向右浮动,直到碰到父容器边界或其他元素为止。
那么容器塌陷是怎么产生的呢?
我们有一个父容器,内部包含了浮动元素。
由于浮动元素脱离了文档流,所以从父容器的视角来看,它“不见”了这个浮动子元素,认为容器内已经没有元素了。
所以计算父容器的高度时,不会把浮动元素的高度算在内,导致父容器高度为0。内容消失了,所以称为“塌陷”。
实际效果就是,浮动元素还在那里,但是后面的标准流内容就会向上移位,和浮动元素重叠到了一块儿。页面布局混乱。
例如:
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
.left { float: left; height: 100px; }
left浮动,但container不知道它的高度,所以右侧的right内容会移上来,和left重叠。容器高度塌陷了。
解决方法就是通过触发BFC,清除浮动影响,让容器重新检测内部高度。
