css要如何清除浮动

css清除浮动的方法：1、浮动代码后添加一个设置了“clear:both”样式的空div标签。2、给父级元素添加一个设置“clear:both; ”样式的after伪元素。3、给父元素设置“overflow: auto”样式。

本教程操作环境：windows7系统、CSS3& & HTML5版、Dell G3电脑。

在我们写代码的时候，有时因为使用了float浮动元素而导致页面中某些元素不能正确的显示。

但使用float浮动元素后，会有一些不好的影响：

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

这个时候就需要清除浮动了，下面介绍一些css清除浮动的方法。

（1）使用clear:both清除浮动

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

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

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

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

.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}
    

（学习视频分享：css视频教程）

以上就是css要如何清除浮动的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！