css清除浮动的方式有哪些？

为什么要清除浮动？清除浮动的方式有哪些

一、为何清除浮动

• 很多情况下，父级盒子不方便给宽和高，但是子盒子浮动就不占位置，最后父级盒子为0，影响下面盒子

目的

• 为了解决因为子盒子浮动造成的内部高度为0的为题

二.清除浮动方式

1.额外标签法

• 通过在浮动元素末尾添加一个空白的标签

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

（1） 优点：通俗易懂、书写方便
（2） 缺点：添加许多无意义的标签，结构化极差

2. 父级添加overflow属性方法

<style>
.content {
    overflow:hidden;
}
</style>
<div class="content">
    <div class="section"></div>
</div>

（1） 优点：代码简洁
（2） 缺点：内容增多时容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

3. 父级使用after伪元素清除浮动(推荐)

• after方式为空元素额外标签法的升级版，好处是不同单独加标签了

<style>
.clearfix:after {
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix {
    *zoom:1;//专用于清除TE6、7浮动样式
    //通过触发hasLayout来实现
</style>
<div></div>

（1） 优点：符合闭合浮动思想，结构语义化正确
（2） 缺点：IE6、7不支持after,使用hasLayout触发
（3） 代表性网站：百度、淘宝等

4. 父级使用双伪元素清除浮动(推荐)

<style>
.clearfix:before,.clearfix:after{
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    *zoom:1;
}
</style>

（1） 优点：代码更简洁
（2） 缺点：IE6、7不支持after,使用hasLayout触发
（3） 代表性网站：小米、腾讯等

这个小弟第一次写博客，从html开始写起，文章不好之处还请多多包涵！！！