html5清除浮动的作用,浮动、BFC以及清除浮动

什么是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%的布局

.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;}

左侧浮动，宽度固定300px

右侧overflow:hidden

使用BFC来防止文字环绕

这个其实和上面是一样的道理。浮动元素会形成文字环绕，这本来是好事，但是偏偏有时候可能不想让文字环绕，此时可以通过给文字元素创建BFC来阻止。

默认情况：

.container { width: 230px; height: 200px; border: solid 2px #00F;}

.float { width: 100px;height: 100px;background: #ccc;float: left;margin: 5px;}

我是环绕文字，我是环绕文字，我是环绕文字，我是环绕文字，我是环绕文字，我是环绕文字，我是环绕文字，我是环绕文字，我是环绕文字，我是环绕文字，我是环绕文字，我是环绕文字，我是环绕文字。

清除文字环绕：

.container { width: 230px; height: 200px; border: solid 2px #00F;}

.float { width: 100px;height: 100px;background: #ccc;float: left;margin: 5px;}

p{overflow:hidden;}

我是环绕文字，我是环绕文字，我是环绕文字，我是环绕文字，我是环绕文字，我是环绕文字，我是环绕文字，我是环绕文字，我是环绕文字，我是环绕文字，我是环绕文字，我是环绕文字，我是环绕文字。

浮动

默认情况下，浮动会造成父元素的高度塌陷，所以我们要清除浮动。

清除浮动的几种方法

清除浮动一般有两种思路

利用 clear属性，清除浮动

使父容器形成BFC

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

在最后面追加空白元素(如
)添加clear:both添加clear:both；

使用伪元素.clearfix{content:'';display:block;clear:both;}；

父元素也跟着浮动，但是这样又会造成父元素的父元素高度塌陷，所以不推荐；

创建BFC，如给父元素设置overflow:hidden；

参考