web前端，css清除浮动的常见方法

一、为什么要清除浮动

• 当我们为盒子设置浮动样式的时候，这是盒子将会脱离标准流，这样原先布局的其他内容将会占据盒子的位置，这样就没法看见相关内容。
• 而在清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。
  

二、常见清除浮动的方式

1.额外标签法（隔墙法）

额外标签法就是在浮动元素的末尾添加一个空标签。(空标签只能是块级元素)

        <div class="leftBox">1</div>
        <div class="rightBox">2</div>
        <div style="clear: both;"></div>
    </div>
    <div class="normalBox"></div>

2.overflow方式清楚浮动

给父元素添加 overflow属性，并且属性值设置为hidden、auto或者scroll即可清除浮动

3.：after伪元素清除浮动

给父元素添加clearfix样式

 .clearfix:after {
            content: "";
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
        }

        /* 兼容ie6ie7 */
        .clearfix {
            *zoom: 1
        }

4.双伪元素清除浮动

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

        .clearfix:after {
            clear: both;
        }

        /* 兼容ie6ie7 */
        .clearfix {
            *zoom: 1
        }

以上便是清除浮动的常见方式

注：文章仅供参考学习，如有侵权请联系作者