2.13-CSS基础--清除浮动五种方法

最新推荐文章于 2024-05-31 14:44:29 发布

秋枫 ~

最新推荐文章于 2024-05-31 14:44:29 发布

阅读量90

点赞数

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

本文是秋枫 ~原创文章，转载请附上博文链接！

本文链接：https://blog.csdn.net/weixin_43472938/article/details/126081203

版权

CSS 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

方法一、直接给父元素设置高度

优点：简单粗暴
缺点：某些布局中不适用。如：新闻列表、京东推荐模块，不适用设置高度

在这里插入图片描述

方法二、额外标签法

操作方法：
- 在父元素内容的最后添加一个块级元素
- 给添加的块级元素设置 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>
        .father {
            width: 400px;
            background-color: pink;
        }
        .son {
            float: left;
            width: 100px;
            height: 400px;
            background-color: blue;
        }
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
            /* 使其伪元素在网页中隐藏看不见 */
            height: 0;
            visibility: hidden;
            /* 若需清楚浮动只需给标签加上类clearfix即可清楚浮动 */
        }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="son"></div>
    </div>
    <div class="clearfix"></div>
    <div class="clearfix"></div>
    <div class="clearfix"></div>
    <div class="clearfix"></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>
        .father {
            width: 400px;
            background-color: pink;
        }
        .son {
            float: left;
            height: 400px;
            width: 100px;
            background-color: blue;
        }
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }
        .clearfix::after {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="son"></div>
    </div>
</body>
</html>

优点：项目中使用，直接给标签加类即可清除浮动

方法五、给父元素设置overflow : hidden

操作：直接给父元素设置 overflow : hidden
优点：方便

<!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>
        .father {
            width: 400px;
            background-color: pink;
            overflow: hidden;
        }
        .son {
            float: left;
            height: 400px;
            width: 100px;
            background-color: blue;
        }
  
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>