CSS清除浮动

最新推荐文章于 2025-07-05 00:14:21 发布

本然233

最新推荐文章于 2025-07-05 00:14:21 发布

阅读量2.6k

点赞数 2

CC 4.0 BY-SA版权

文章标签： CSS 清除浮动

本文链接：https://blog.youkuaiyun.com/qq_35008279/article/details/80736723

本文详细介绍了在网页布局中解决浮动元素导致的父元素高度塌陷问题的多种方法，包括设置父元素高度、使用clear属性、外墙法、内墙法、伪元素选择器以及使用overflow属性等，并针对每种方法的特点进行了对比分析。

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

在标准流中内容的高度可以撑起父元素的高度；
在浮动流中浮动的元素是不可以撑起父元素的高度的。

方式一

给前面一个父元素设置高度（用的很少）

方式二

给后面的盒子添加clear属性
clear属性取值：
none：默认取值，按照浮动元素的排序规则来排序（左浮动找左浮动，右浮动找右浮动）
left：不要找前面的左浮动元素
right：不要找前面的右浮动元素
both：不要找前面的左浮动元素和右浮动元素
注意点：添加clear属性后，margin属性会失效
原因：如果是父子元素，给子元素设置margin-top，而父元素没有border，那么父元素会跟着被顶下来。

方式三-外墙法

1.1 在两个盒子中间添加一个额外的块级元素
1.2 给这个额外添加的块级元素设置clear: both属性
注意点：外墙法可以让第二个盒子使用margin-top属性；外墙法不可以让第一个盒子使用margin-bottom属性；可以通过设置添加元素的高度来设置间距。

方式四-内墙法

2.1 在第一个盒子中所有子元素最后添加一个额外的块级元素
2.2 给这个额外添加的块级元素设置clear: both属性
注意点：外墙法可以让第二个盒子使用margin-top属性；外墙法也可以让第一个盒子使用margin-bottom属性；可以通过设置添加元素的高度来设置间距。

区别

外墙法不能撑起第一个盒子的高度，而内墙法可以撑起第一个盒子的高度

方式四（推荐）

伪元素选择器：给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素
格式：

标签名称:: before{
    属性名称: 值
}

标签名称:: after{
    属性名称: 值
    content: "";/*指定添加的子元素中存储的内容*/
    width: 50px;/*指定添加的子元素的宽度和高度*/
    height: 0;
    background-color: pink;
    display: block;/*指定添加的子元素的显示模式*/
    visibility: hidden;/*隐藏添加的子元素*/
}

注意：内容可以超出元素范围，想要设置伪元素选择器的内容看不见，除了height: 0，还要visibility: hidden
3. 通过伪元素选择器清除浮动
在第一个盒子内容后面添加一个伪元素选择器：

标签名称:: after{
    content: "";/*设置添加的子元素的内容为空*/
    display: block;/*设置添加的子元素为块级元素*/
    height: 0;/*设置添加的子元素的高度为0*/
    visibility: hidden;/*设置添加的子元素看不见*/
    clear: both;/*给添加的子元素设置clear: both*/
}

兼容问题

标签名称{
    *zoom: 1;/*兼容IE6*/
}

方式六（推荐）

overflow: hidden; 作用
1.1 可以将超出标签范围的内容裁减掉
1.2 清除浮动
可以让第一个盒子使用margin-bottom属性；也可以让第二个盒子使用margin-top属性
1.3 可以通过overflow: hidden; 让里面的盒子设置margin-top之后，外面的盒子不被顶下来
兼容问题

标签名称{
    *zoom: 1;/*兼容IE6*/
}