解决浮动的方法

浮动的作用：常用于图片，实现文字环绕的效果。

浮动的特点：脱离文档流，容易造成盒子塌陷，影响其他元素的排列。

浮动引发塌陷：父元素中子元素都浮动，父盒子高度为0。

清除浮动的方法：

1. 给父元素增加高度-----手动（前提是已经知道具体高度）
2. 给父元素设置overflow:hidden
3. 给最后一个浮动元素之后加clear:both;
4. 使用after伪元素清除浮动

    1.给父元素增加高度-----手动（前提是已经知道具体高度） 

     2.给父元素设置overflow:hidden

 3.给最后一个浮动元素之后加clear:both

        3.1 父元素有高度（清除浮动），直接为下个元素设置clear:both;

     3.2 父元素无高度,在浮动的两个盒子后加一个盒子。

•      one盒子和two盒子设置浮动后，脱离了文档流，父盒子（塌陷）高度为0.
•       用clear盒子去清除上两个盒子的浮动。

 

4 使用after伪元素清除浮动

              为了方便可以直接定义一个，需要了直接将类名加上。

.clearfix::after{
            content: '';
           //转为块元素
            display: block;
            clear: both;
          }