清除浮动的方法有哪些

在我们写代码的时候，有时因为使用了float浮动元素而导致页面中某些元素不能正确的显示，接下来在文章中将为大家详细介绍几种清除浮动的方法，具有一定的参考价值，希望对大家有所帮助。

浮动导致的后果

1. 由于浮动元素脱离了文档流，所以父元素的高度无法被撑开，影响了与父元素同级的元素
2. 与浮动元素同级的非浮动元素会跟随其后，因为浮动元素脱离文档流不占据原来的位置
3. 如果该浮动元素不是第一个浮动元素，则该元素之前的元素也需要浮动，否则容易影响页面的结构显示

清除浮动的方法

1. 使用 clear:both 清除浮动

在代码中在放一个空的div标签，然后给这个标签设置 clear:both 来清除浮动对页面的影响。它的优点是简单，方便兼容性好，但是一般情况下不建议使用该方法，因为会造成结构混乱，不利于后期维护

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

2. 利用伪元素 clearfix 来清除浮动

给父级元素添加了一个 :after 伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的

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

3. overflow 方法的使用

当给父元素设置了 overflow 样式，不管是 overflow:hidden 或 overflow:auto 都可以清除浮动只要它的值不为 visible 就可以了，它的本质就是建构了一个BFC，这样使得达到撑起父元素高度的效果

.clearfix{
    overflow: auto
}

4. 双伪元素方法的使用

通过给父元素设置双伪元素来达到清除浮动的效果

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

总结：以上就是本篇文章的全部内容了，希望通过这篇文章能够让大家对清除浮动的方法有所了解