CSS清除浮动详解、本质和方法总结

最新推荐文章于 2025-06-12 15:01:55 发布

原创最新推荐文章于 2025-06-12 15:01:55 发布 · 1.1k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

前端专栏收录该内容

26 篇文章

订阅专栏

一、为什么要清除浮动？

首先思考：

（1）我们前面浮动元素有一个标准流的父元素, 他们有一个共同的特点,都是有高度的.

但是, 所有的父盒子都必须有高度吗?

（2）理想中的状态, 让子盒子撑开父亲. 有多少孩子,我父盒子就有多高.

但是不给父盒子高度会有问题吗?…..

答：

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

分析：

box不加高度，damao ermao 不加浮动：

box不加高度，damao ermao 加浮动：

box会没有高度显示变成一条线即高度变成0

此时再加别的盒子，会跑到box下面去 damao ermao下面去这并不是我们想要的结果

我们想要的结果应该是这样的：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动布局注意点</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 900px;
            /* height: 300px; */
            border: 1px solid pink;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 200px;
            height: 150px;
            background-color: red;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        .flooter {
            height: 200px;
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">damao</div>
        <div class="ermao">ermao</div>
    </div>
    <div class="flooter">flooter</div>
</body>

</html>

那么如何解决呢？就需要我们的清除浮动了

二、清除浮动的本质

（1）清除浮动的本质是清除浮动元素造成的影响

（2）如果父盒子本身有高度，则不需要清除浮动

（3）清除浮动之后，父级会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

语法：

选择器{clear:属性值;}

我们实际工作中，几乎只用 clear: both;

清除浮动的策略是: 闭合浮动.

三、清除浮动方法

1. 额外标签法 也称为隔墙法，是 W3C 推荐的做法。

2. 父级添加 overflow 属性

3. 父级添加after伪元素

4. 父级添加双伪元素

1、额外标签法（隔墙法）

额外标签法会在浮动元素末尾添加一个空的标签。

例如 <div style=”clear:both”></div>，或者其他标签（如<br />等）。（后加空墙）

.clear {
            clear: both;
        }


<div class="flooter">flooter</div>

（1）优点：通俗易懂，书写方便

（2）缺点：添加许多无意义的标签，结构化较差

注意：要求这个新的空标签必须是块级元素！！！不能是行内元素！！！

否则：

  <span class="clear"></span>

总结:

1. 清除浮动本质是?

清除浮动的本质是清除浮动元素脱离标准流造成的影响

2. 清除浮动策略是?

闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子.

3. 额外标签法?

隔墙法, 就是在最后一个浮动的子元素后面添加一个额外标签, 添加清除浮动样式.

实际工作可能会遇到,但是不常用

2、父级添加overflow

可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。（隐藏）

子不教,父之过,注意是给父元素添加代码

（1）优点：代码简洁

（2）缺点：无法显示溢出的部分

  overflow: hidden;

3、父级添加after伪元素

:after 方式是额外标签法的升级版。也是给父元素添加（后面给堵上）

语法：

.clearfix:after { 
 content: ""; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden; 
} 
.clearfix { /* IE6、7 专有 */ 
 *zoom: 1;
}

（1）优点：没有增加标签，结构更简单

（2）缺点：照顾低版本浏览器

（3）代表网站：百度、淘宝网、网易等

4、父级添加双伪元素

也是给父级添加（前后都堵上）

.clearfix:before,.clearfix:after {
 content:"";
 display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
 *zoom:1;
}

四、清除浮动总结

为什么需要清除浮动？

① 父级没高度。（有高度就不会有浮动引起的问题了）

② 子盒子浮动了。（只有浮动的盒子会引起脱标会有问题）

③ 影响下面布局了，我们就应该清除浮动了。