CSS13：清除浮动

最新推荐文章于 2024-08-30 15:33:13 发布

MNox

最新推荐文章于 2024-08-30 15:33:13 发布

阅读量58

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/m0_62820255/article/details/130382311

版权

文章详细阐述了浮动元素在CSS布局中的两个主要副作用：一是导致父元素高度塌陷，二是影响后续元素的布局。为解决这些问题，文章介绍了四种清除浮动的方法，包括为父元素设置高度、受影响元素添加clear属性、使用overflow隐藏以及利用伪对象。这些方法有助于维护正常的页面布局。

摘要由CSDN通过智能技术生成

浮动副作用：

1、浮动元素会造成父元素高度塌陷

<!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>
        .container{
            width: 500px;
            /* 高度未设置，所以container的高度就是所包含box的高度 */
            background-color: aquamarine;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>

.box{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 5px;
            /* 添加浮动 */
            float: left;
        }

造成父元素塌陷。

从左上角可知，大盒子高度为0。

2、后续元素会受到影响

<!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>
        .container{
            width: 500px;
            /* 高度未设置，所以container的高度就是所包含box的高度 */
            background-color: aquamarine;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 5px;
            /* 添加浮动 */
            float: left;
        }
        .text{
            width: 100px;
            height: 100px;
            background-color: burlywood;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="text"></div>
    </div>
    
</body>
</html>

清除浮动

1、父元素设置高度（略）

2、受影响的元素增加clear属性

3、overflow清除浮动

4、伪对象方式

2、受影响的元素增加clear属性

<!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>
        .container{
            width: 500px;
            /* 高度未设置，所以container的高度就是所包含box的高度 */
            background-color: aquamarine;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 5px;
            /* 添加浮动 */
            float: left;
        }
        .text{
            width: 100px;
            height: 100px;
            background-color: burlywood;
            /* 添加clear属性 */
            clear: both;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="text"></div>
    </div>
    
</body>
</html>

3、overflow清除浮动

如果有父级塌陷，并且同级元素也受到了影响，可以使用overflow。

这种情况下，父级布局不能设置高度。

父级标签里面的样式加：overflow：hidden；clear: both;

）同级元素受到影响：

<!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>
        .container{
            width: 500px;
            /* 高度未设置，所以container的高度就是所包含box的高度 */
            background-color: aquamarine;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 5px;
            /* 添加浮动 */
            float: left;
        }
        .text{
            width: 100px;
            height: 100px;
            background-color: burlywood;
            
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <!-- container和text是同级元素 -->
    <div class="text"></div>
    
</body>
</html>

overflow清除浮动

.container{
            width: 500px;
            /* 高度未设置，所以container的高度就是所包含box的高度 */
            background-color: aquamarine;
            overflow: hidden;
            clear: both;
        }

4、伪对象方式

如果有父级塌陷，并且同级元素也受到了影响，可以使用伪对象方式。

为父级标签添加伪类after并且使用clear：both；

这种情况下，父级布局不能设置高度。

.container{
            width: 500px;
            /* 高度未设置，所以container的高度就是所包含box的高度 */
            background-color: aquamarine;
        }

        .container::after{
            content: "";
            display: block;
            clear: both;
        }

情况一：

<div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <!-- container和text是同级元素 -->
    <div class="text"></div>

情况二：

<div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="text"></div>
    </div>

.text{
            width: 100px;
            height: 100px;
            background-color: burlywood;
            /* 在text中加入clear */
            clear: both;
        }

MNox

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS13：清除浮动

父级标签里面的样式加：overflow：hidden；为父级标签添加伪类after并且使用clear：both；也受到了影响，可以使用overflow。也受到了影响，可以使用伪对象方式。2、受影响的元素增加clear属性。这种情况下，父级布局不能设置高度。这种情况下，父级布局不能设置高度。从左上角可知，大盒子高度为0。3、overflow清除浮动。overflow清除浮动。1、父元素设置高度（略）如果有父级塌陷，并且。如果有父级塌陷，并且。
复制链接

扫一扫