浮动、BFC以及清除浮动
本文由 小茗同学 发表于 2016-11-24 浏览(3595)
最后修改 2018-06-27 标签:bfc css 清除 浮动

什么是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 的值为absolutefixed);
  • 非块级元素的块级容器(display 的值为inline-blocktable-celltable-captionflexinline-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

具体一点有如下几种方式:

  1. 在最后面追加空白元素(如<br>)添加clear:both添加clear:both
  2. 使用伪元素.clearfix{content:'';display:block;clear:both;}
  3. 父元素也跟着浮动,但是这样又会造成父元素的父元素高度塌陷,所以不推荐;
  4. 创建BFC,如给父元素设置overflow:hidden

关于为什么overflow:hidden会创建一个BFC,看这里:
https://www.zhihu.com/question/30938856

参考

http://www.cnblogs.com/dolphinX/p/3508869.html

http://luopq.com/2015/11/08/CSS-float/