CSS 清除浮动的4种方法

1. 为什么要清除浮动

因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。

2. 清除浮动的方法

（1）额外标签法

在浮动元素末尾添加一个空的标签例如：

<div style="幼儿教师专业c英语四级题lear:both"></div>

（2）父级添加overflow属性

可以给父级添加overflow属性为hidden或auto或scroll：

.Father {     overflow: hidden;    /* overflow: auto; */    /* overflow: scroll; */}

（3）父级使用after伪元素

.Father:after {     content: "";    display: block;    height: 0;    clear: both;    visibilit河流水系特征y: hidden;}/* IE6、7 专有 */.Father {     *红星照耀中国好词好句zoom: 1;}

（4）父级使用双伪元素

.Father:before, .Father:after {     content: "";    display: table;}.Father:after {     clear: both;}.Father {     *zoom: 1;}

3. 总结

清除浮动的方式优点缺点额外标签法通俗易懂，书写方便添加许多无意义的标签，结构化较差父级添加overflow属性书写简单溢出隐藏父级使用after伪元素结构语义化正确由于IE6-7不支持:after，兼容性问题父级使用双火烧的寂寞 歌词伪元素结构语义化正确由于IE6-7不支持:after，兼容性问题

本文地址：https://blog.csdn.net/Jack_lzx/article/details/109632757