CSS浮动

1. 浮动

 float  通过浮动可以使一个元素向其父元素的左侧或右侧移动。
    
            可选值：
                  none （默认值）元素不浮动
                  left   元素向左浮动
                  right  元素向右移动

2. 浮动的特点

     1. 浮动元素会完全脱离文档流，不在占据文档流的位置。                 
     2. 元素脱离文档流后，元素类型就转化为行内块元素。
     3. 浮动元素只会在父元素中的左侧或右侧移动，默认不会从父元素中移除。
     4. 浮动元素之间默认是按照某个方向排列，不会覆盖。但是可以通过margin属性，产生覆盖功能。

3.高度坍塌

定义:父元素没有指定高度，父元素的高度由于子元素撑起来的，当子元素的由于布局需要浮动，浮动的子元素会脱离文档流，导致了子元素无法再撑起父元素，所以父元素的高度塌陷了。
 

写一个盒子，高度为0，为了更方便讲解，我们设置个padding（30px），设置个背景色（粉色），这样大家就能看到背景的存在。然后再在里面放3个浮动盒子（橙色）。

这时，我们发现了什么，内容（浮动盒子）并不能撑开容器，容器的高度还是0；

这就是高度坍塌！

那么，造成高度坍塌的根源是什么？

常规流盒子的自动高度（高度为auto时），在计算时，不会考虑浮动盒子

所以，我们的父元素没有高度，那么高度是auto，由内容来撑开，内容决定父元素的高度。但是，内容里面有浮动盒子，按照规则，它不会把浮动元素的高度计算进去，所以，上图，父元素的高度还是0！因为常规流计算高度，而浮动盒子是脱离常规流的。

以上所有高度坍塌呢，指的是自动高度，那么手动高度呢，就不算在内啦！

解决高度坍塌的办法：

1. 清除浮动：clear

给父元素内部添加一个空的div元素，设置clear:both。

clear 属性规定元素的哪一侧不允许其他浮动元素。

 例：在container父元素中，在item（浮动盒子）的最后，添加一个空盒子(clearfix)，来清除浮动，以解决高度坍塌

    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <!-- 空盒子，用来解决高度坍塌 -->
        <div class="clearfix"></div>
    </div>

 

.container .clearfix {
    clear: both;
}

效果：

 

2.  利用伪类::after

利用::after来清除浮动，跟上面的添加一个空元素来解决浮动是差不多的意思，但是不会凭空添加无意义元素，而是通过伪类的方式。

例：在父元素（.container）中直接添加css样式（.clearfix）

   <div class="container clearfix">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

 总结：