什么是BFC
BFC全称Block Formatting Context
,意思是块级格式上下文
,它是一个独立的布局环境,一个BFC中的元素布局不受外界的影响。
W3C中关于BFC的定义:
浮动元素、绝对定位元素、非块级元素的块级容器(如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为
visiable
的元素,都会为他们的内容创建新的BFC(块级格式上下文)。
PS:与之类似的还有一个叫层叠上下文stacking context
的东西。
形成一个BFC的条件
- 浮动元素(float为left或者right);
- 绝对定位元素(position 的值为
absolute
或fixed
); - 非块级元素的块级容器(display 的值为
inline-block
、table-cell
、table-caption
、flex
,inline-flex
) - overflow 的值不为 visible;
创建BFC最常见的做法是使用overflow:hidden
,因为它几乎不会造成任何负面影响。
BFC的特点
- 同一个BFC内部相邻两个垂直方向的块级元素会发生margin合并(即上面元素的margin-bottom和下边元素的margin-top会合并,当二者不一致时将以最大的那个外边距为准);
- BFC不会与浮动元素重叠(
overflow:hidden
可以实现左侧固定右侧100%效果利用的就是这个特性); - BFC可以包含浮动(给父容器设置
overflow:hidden
可以清除浮动利用的就是这个特性); - 在BFC中,每个盒子的margin-left紧挨着包含块的border-left(从右到左的格式,则为紧挨右边框)。
BFC的用途
使用BFC来防止外边距折叠
上面我们知道,同一个BFC内部相邻两个垂直方向的块级元素会发生margin合并,如果他们属于不同的BFC,他们之间的外边距将不会折叠。所以通过创建一个新的BFC我们可以防止外边距折叠。
使用BFC清除浮动
清除浮动通常使用clear:both
来实现,但也可以通过创建一个BFC来清除浮动(通常的做法是给浮动父元素设置overflow:hidden
)。
使用BFC实现左侧固定右侧100%的布局
详见:http://blog.haoji.me/left-fixed-and-right-fill-layout.html
<style>
.clear-float:after {content: ''; display: block; clear: both;}
.aside {float: left; width: 300px; background: #F6D3FF; height: 200px; margin-right: 10px;}
.content { overflow: hidden; zoom: 1; background: #FFD5B1; height: 200px;}
</style>
<section class="container clear-float">
<aside class="aside">左侧浮动,宽度固定300px</aside>
<article class="content">右侧overflow:hidden</article>
</section>
使用BFC来防止文字环绕
这个其实和上面是一样的道理。浮动元素会形成文字环绕,这本来是好事,但是偏偏有时候可能不想让文字环绕,此时可以通过给文字元素创建BFC来阻止。
默认情况:
<style>
.container { width: 230px; height: 200px; border: solid 2px #00F;}
.float { width: 100px;height: 100px;background: #ccc;float: left;margin: 5px;}
</style>
<div class="container">
<div class="float"></div>
<p>
我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字。
</p>
</div>
清除文字环绕:
<style>
.container { width: 230px; height: 200px; border: solid 2px #00F;}
.float { width: 100px;height: 100px;background: #ccc;float: left;margin: 5px;}
p{overflow:hidden;}
</style>
<div class="container">
<div class="float"></div>
<p>
我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字,我是环绕文字。
</p>
</div>
浮动
默认情况下,浮动会造成父元素的高度塌陷,所以我们要清除浮动。
清除浮动的几种方法
清除浮动一般有两种思路
- 利用 clear属性,清除浮动
- 使父容器形成BFC
具体一点有如下几种方式:
- 在最后面追加空白元素(如
<br>
)添加clear:both
添加clear:both
; - 使用伪元素
.clearfix{content:'';display:block;clear:both;}
; - 父元素也跟着浮动,但是这样又会造成父元素的父元素高度塌陷,所以不推荐;
- 创建BFC,如给父元素设置
overflow:hidden
;
关于为什么overflow:hidden
会创建一个BFC,看这里:
https://www.zhihu.com/question/30938856