浮动元素父元素设置css清除浮动的方法_float 布局父元素 clearfix-优快云博客

本文介绍了两种常用的清除浮动的方法：一是通过为父元素添加clearfix类来确保浮动元素能够被正确包裹；二是利用overflow属性来达到类似的效果。这两种方法都能有效解决由于元素浮动导致的布局问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图像的浮动会让接下来的内容环绕在它的周围，不过，父元素的高度却不受浮动元素的影响了，不清除浮动会影响接下来的布局。

一，为父元素加入clearfix类

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

before和after分别在父元素包含的内容的前面和后面加入content的内容，实际使用时把* * * * *替换为空格，这样写比较容易看出原理。
为后面的* * * * *设置清除浮动，这样父元素就可以被撑起来了。

效果如图
这里写图片描述

二，为父元素设置
overflow:hidden; 或者
overflow:auto；

两者效果如图
这里写图片描述

搜了一下，这个原理比较复杂，知乎上有答案，大概意思就是说，设置了overflow以后，父元素要在计算了元素高度后才能hidden，而把float元素直接截掉是违反布局常识的，所以要把float元素的高度计算在内。
但是hidden容易将内容截断，auto会出现滚动条，所以大部分情况下我们用第一种方法。