CSS清除浮动的方法总结

最新推荐文章于 2024-08-17 22:24:13 发布

万象穷究

最新推荐文章于 2024-08-17 22:24:13 发布

阅读量88

点赞数

分类专栏： css 文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_52629381/article/details/127375979

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

引言：

有时，我们并不想让内容向浮动元素的一方移动。比如如果子元素浮动了，并且父元素没有设置高度，此时脱离标准流的不占位的子元素将不能撑开块级父元素，所以会影响其他网页元素的布局。如下图所示：

方法一：为父元素添加高

非常简单，但却十分受限。因为在实际应用中，如果父元素包含的内容是动态变化的，那么我们就不能固定地为父元素设置高度。

方法二：额外标签法

操作：

在父元素内容后添加一个块级元素
给添加的块级元素设置clear：both（清除浮动影响）

缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂。

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clearfix{
            clear:both;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <!-- 添加的块级元素 -->
        <div class="clearfix"></div>
    </div>
    <!-- 其他网页元素 -->
    <div class="other"></div>
    
</body>
</html>

clear属性只适用于块级元素，clear:both保证目标元素（clearfix）不与任何浮动的元素共处一行。

对clear属性的更详细解析：

在CSS1和CSS2中，clear起作用的方式是增加元素的上外边距，把元素移到浮动的元素下方。因此，为元素声明的上外边距其实会被忽略。假如元素自身的上外边距为1.5rem，为了把元素向下移动足够的距离，确保内容区在浮动元素的下边界以下，浏览器可能会把上外边距增加为10em、25px、7.133in，或者其他能满足要求的值。

然而，CSS2.1引入了间距（clearance）这个概念。间距是为了把元素向下移动，确保显示在浮动元素下方而在元素上外边距上方增加的额外空白。这意味着，清楚了浮动的元素，其上外边距不再受影响。

方法三：单伪元素清楚法（常用）

用伪元素代替了额外标签。

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 基本写法 */
        .clearfix::after{
            content: '';
            /* 将伪元素标签由行内元素转为块元素 */
            display: block;
            clear: both;
        }

        /* 补充写法 原理同上，考虑了对低版本浏览器的兼容性  */
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
            /* 补充代码，在网页中看不到伪元素 */
            height: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <!-- 添加的块级元素 -->
        <div class="clearfix"></div>
    </div>
    <!-- 其他网页元素 -->
    <div class="other"></div>
</body>
</html>

方法四：双伪元素清楚法

优点：直接给标签加类即可清除浮动。

代码示例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clearfix::after,
        .clearfix::before
        {
            content: '';
            display: table;
        }
        .clearfix::after{
            clear:both;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <!-- 添加的块级元素 -->
        <div class="clearfix"></div>
    </div>
    <!-- 其他网页元素 -->
    <div class="other"></div>
</body>
</html>

方法五：給父级元素添加overflow：hidden

这样父级的高度就随子级容器及子级内容的高度而自适应。

以上若有不当之处，欢迎指正。