怎么利用CSS清除浮动

在写代码的时候，有时因为使用了float浮动元素而导致页面中某些元素不能正确的显示 下面来看看清除浮动的三种方式： 1、使用clear:both清除浮动 在代码中在放一个空的div标签，然后给这个标签设置clear:both来清除浮动对页面的影响。它的优点是

在写代码的时候，有时因为使用了float浮动元素而导致页面中某些元素不能正确的显示
下面来看看清除浮动的三种方式：

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

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

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

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

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

.box{border:1px solid #ccc;background:#eff2f4;overflow: auto}