CSS笔记之清除浮动

怡然一记 • 2022-10-18 • 前端开发, 学习笔记, 软件分享 • 293 阅读

CSS学习之清除浮动

一：为什么要清除浮动

在实际开发中，我们的子元素包含在父级盒子中，然而子元素设置了浮动，脱离了标准流，而我们又不方便给父级盒子一个固定的高度，所以就会导致父级盒子因为没有高度，而出现布局问题，所以我们需要用到一个方法，既不会影响布局，子元素又能浮动，所以就需要设置清除浮动对父级盒子的影响

二：清除浮动的方法

1:清除浮动的方法

方法 属性 解释
添加额外标签法 style{clear:both} 在浮动的最后一个盒子处，添加一个空标签并设置样式
父级盒子添加样式 overflow: hidden; 设置父级盒子自动获取高度实现撑开父级盒子
after伪标签 content: "";display: block;height: 0;visibility: hidden;clear: both; 这种方式属于添加空标签的改进方式，实际中推荐使用伪标签法
双伪标签法 .clearfix:after,.clearfix:before {content: "";display: table;} 也是空标签的改进方式，只不过是在前后添加了空标签

2.实现方法

2.1添加额外标签法

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta httpss-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隔墙法</title>
    <style>
        .box {
            width: 500px;
            background-color: cadetblue;
        }
        .one,
        .two {
            float: left;
            height: 200px;
            width: 200px;
            background-color: blue;
        }

        .two {
            background-color: palevioletred;
        }
        .box2 {
            width: 500px;
            height: 50px;
            background-color: black;
            
        }
        /* 在浮动的最后一个盒子添加一个空盒子，设置清除浮动，达到隔墙的效果，就可以不影响布局 */
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="clear"></div>
    </div>
    <div class="box2"></div>
</body>
</html>

2.2父级盒子添加voerflow

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta httpss-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父级添加voerflow</title>
    <style>
        .box {
            width: 500px;
            background-color: cadetblue;
            /* 在父级添加overflow，就可以实现撑开父级盒子 */
            overflow: hidden;
        }
        .one,
        .two {
            float: left;
            height: 200px;
            width: 200px;
            background-color: blue;
        }

        .two {
            background-color: palevioletred;
        }
        .box2 {
            width: 500px;
            height: 50px;
            background-color: black;
            
        }
     </style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
    </div>
    <div class="box2"></div>
</body>
</html>

2.3使用after伪标签法

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta httpss-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>after伪标签法</title>
    <style>
		.clearfix:after {
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        } 
         /*由于伪标签只适配新版本浏览器，所以需要额外适配老版本，设置*zoom: 1;*/
        .clearfix {
            *zoom: 1;
        }
        .box {
            width: 500px;
            background-color: cadetblue;
        }
        .one,
        .two {
            float: left;
            height: 200px;
            width: 200px;
            background-color: blue;
        }

        .two {
            background-color: palevioletred;
        }
        .box2 {
            width: 500px;
            height: 50px;
            background-color: black;
            
        }
     </style>
</head>
<body>
    <!-- 在父级盒子引用清除浮动 -->
    <div class="box clearfix">
        <div class="one"></div>
        <div class="two"></div>
    </div>
    <div class="box2"></div>
</body>
</html>

2.4双伪标签法

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta httpss-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双伪标签法</title>
    <style>
       /* 双伪标签 */
        .clearfix:after,
        .clearfix:before {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        /*由于伪标签只适配新版本浏览器，所以需要额外适配老版本，设置*zoom: 1;*/
        .clearfix {
            *zoom: 1;
        }
        .box {
            width: 500px;
            background-color: cadetblue;
        }
        .one,
        .two {
            float: left;
            height: 200px;
            width: 200px;
            background-color: blue;
        }

        .two {
            background-color: palevioletred;
        }
        .box2 {
            width: 500px;
            height: 50px;
            background-color: black;
            
        }
     </style>
</head>
<body>
    <!-- 在父级盒子引用清除浮动 -->
    <div class="box clearfix">
        <div class="one"></div>
        <div class="two"></div>
    </div>
    <div class="box2"></div>
</body>
</html>

 

 

怡然一记
CSS笔记之清除浮动
https://xsunhua.cn/256.html
THE END
分享
二维码
打赏
海报
CSS笔记之清除浮动
CSS学习之清除浮动 一：为什么要清除浮动 在实际开发中，我们的子元素包含在父级盒子中，然而子元素设置了浮动，脱离了标准流，而我们又不方便给父级盒子一个……
<<上一篇
下一篇>>
文章目录
关闭
目 录