CSS清除浮动

CSS清除浮动

Tip: 一个浮动的内联元素（比如span img标签）不需要设置display：block就可以设置宽度。

<div class="box">
	<div class="height1">float</div>
	<div class="height2">float</div>
</div>

以下方法均已示例参照

方法一：clear:both

在父元素box 末尾添加一个块级元素，并设置样式 clear: both;

<div class="box">
	<div class="height1">float</div>
	<div class="height2">float</div>
	<div style="clear: both;"></div>
</div>

方法二：伪元素 （推荐）

为父元素box 添加clearfix 样式

.clearfix:after {
   content: '';
   display: block;
   clear: both;
}

方法三：给父元素使用overflow:hidden （学习了解）

让父容器形成了BFC（块级格式上下文），而BFC可以包含浮动，通常用来解决浮动父元素高度坍塌的问题。

我们可以给父元素添加以下属性来触发BFC：

1. float 为 left | right
2. overflow 为 hidden | auto | scorll
3. display 为 table-cell | table-caption | inline-block
4. position 为 absolute | fixed

这里可以给父元素设置overflow:auto，但是为了兼容IE最好使用overflow:hidden。
但这种办法有个缺陷：如果有内容出了盒子，用这种方法就会把多的部分裁切掉，所以这时候不能使用。

BFC的主要特征:

1. BFC容器是一个隔离的容器，和其他元素互不干扰；所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题；
2. BFC不会重叠浮动元素；
3. BFC可以包含浮动,这可以清除浮动。

参考：

BFC: https://github.com/ljianshu/Blog/issues/15

至此，结束。