【css】浮动与clearfix（清除浮动）

一、认识浮动

任何元素都可以使用浮动，无论是块级元素（类似div，ul）还是行内元素都可以浮动，任何被声明的float的元素都会自动按被设置成块级元素，拥有了块级元素的特点，比如可以设置宽高，还可以设置内边距。

当元素对象设置了float以后，它将不再独自占据一行。浮动块可以向左或向右移动，直到它的外边缘碰到包含它的框或另一个浮动块的边框为止。

但是还有一点比较重要，float浮动用于布局，可以很轻松达到靠左或者靠右的效果，但是当用完float浮动以后，一定要清除浮动，不然很有可能造成浮动塌陷。

二、那么什么是浮动塌陷呢？

我们首先要知道，在浮动布局中父元素的高度默认是被子元素撑开的。当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑开父元素的高度，导致父元素的高度丢失，高度丢失以后，其下的元素会自动上移，导致页面混乱。

举个问题示例

假如一个父元素包含了几个子元素，此时给这几个子元素都设置了浮动（float：left）那么父元素的高度就会为0。

像下面图片这样：

【没有浮动】

【浮动后】

像上面图片那样，因为加入了浮动，使得图片脱离文档流，div包不住img，同时img加入了浮动，使得div无法被img支撑，导致div高度塌陷，这样就是浮动塌陷。

浮动塌陷的解决办法

清除浮动，下面是清除浮动的4种方式：

1. 在使用float元素父元素之后添加一个高度为0，宽度为0，并且有clear:both样式的div。

<div style="clear: both;"></div>

2. 添加BFC，给在使用float元素的父元素添加隐藏。

不建议用，添加以后超出文字或者图片会被隐藏起来。

style="overflow: hidden;"

3. 给在使用float元素的父元素设置高度。

不建议用，因为比较固定如果后面需要添加元素的话比较受限。

style="height: 320px;"

4. 使用after伪对象清除浮动。

推荐首选，比较方便同时解决了上述问题。

.父级名称或标签::after{
    /* after默认是行内元素，需要修改为块元素 */
    content: ' ';  //在clear类后面添加内容为空
    display: block;  //把添加的内容转化为块元素
    clear: both;  //清除这个元素两边的浮动
}

代码示例：

<!-- HTML部分，添加 clearfix -->
<div class="container clearfix">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

/* CSS部分 */
.clearfix:after {
   content: " ";
   display: block;
   clear: both;
}

此外还会遇到外边距重叠的问题。

三. 那么什么是外边距重叠呢？

问题示例：

container 之中包含一个 item 子元素，代码如下

<div class="container">
  <div class="item">
    item
  </div>
</div>

此时，我给 item 加了 margin-top: 30px ，本来这时候我期待的结果是，item 块本身应该距离 container 青色区域的上边界 30px 。同时一个副作用是青色区域应该拉高 30px 。但是实际上得到的却是下面的效果：

造成这个的原因是，父子元素的 margin-top 是会重叠的，即使是像上面的情况中，父元素 container 自身 margin-top 为 0 的情况下也一样。这样造成的一个现象就是父元素“包不住”子元素的 margin-top ，溢出了。类似的问题也会发生在 margin-bottom 身上。

外边距重叠解决办法

1. 要给 container 添加 clearfix。

<!-- HTML部分 -->
    <div class="container clearfix">
        <div class="item"> item </div>
    </div>

/* CSS部分 */
    .clearfix::before,  //意为在类名为clearfix的最后面和前面添加下面的内容
    .clearfix::after{
        content: '';
        display: table; //注意，display: table 换成 dispaly: block 是不行的。
        clear: both;
    }

2. 也可以给item添加BFC，这样就BFC里面的内容和外层container 就不会互相干扰。

<!-- HTML部分 -->
<div class="container">
    <div class="box">
        <div class="item"> item </div>
    </div>
</div>

<!-- CSS部分 -->
.container{
    overflow: hidden; //添加BFC
}