css-页面产生浮动的原因及清除浮动的方法

清除浮动

当父容器没有设置高度，里面的盒子没有设置浮动的情况下会将父容器的高度撑开。一旦父容器中的盒子设置浮动，脱离标准文档流，父容器立马没有高度，下面的盒子会跑到浮动的盒子下面。出现这种情况，我们需要清除浮动。
清除浮动不是不浮动，是清除浮动产生的不利影响

清除浮动的方法

• 给浮动元素的父元素设置高度

• 额外标签法

  给最后一个浮动元素后边添加额外标签，使用clear:both; 不推荐使用，会产生冗余代码。

• 给浮动元素的父元素使用overflow:hidden; 触发BFC,

  如果有子元素，出了父元素的范围，多出的部分会隐藏掉。

• 后伪元素清除浮动
  给浮动元素的父元素使用 clearfix

    .clearfix:after {
        content: "";
        display: block;
        height: 0;
        line-height: 0;
        visibility: hidden;
        clear: both;
    }
    .clearfix {
        *Zoom: 1;
    }

• 双伪元素清除浮动
  给浮动元素的父元素使用双伪元素清除浮动

    .clearfix:before, .clearfix:after {
        content: "";
        display: table;
    }
    .clearfix:after {
        clear: both;
    }