如何清除float浮动

最新推荐文章于 2023-04-20 17:54:27 发布

Hoshizola

最新推荐文章于 2023-04-20 17:54:27 发布

阅读量140

点赞数

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

本文链接：https://blog.csdn.net/Hoshizola/article/details/109482027

版权

前端专栏收录该内容

48 篇文章 1 订阅

订阅专栏

网页设计时，当在css样式中对某个元素设置浮动时，该元素就会脱离文档流，从而影响到页面排版布局。例如，设置浮动前：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width:100px;
            height: 100px;
            background-color: brown;
        }
        #box2{
            width:200px;
            height: 200px;
            background-color:blue;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

效果如图：
在这里插入图片描述
在选择器为#box1的css中添加设置浮动的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width:100px;
            height: 100px;
            background-color: brown;
            float:left;
        }
        #box2{
            width:200px;
            height: 200px;
            background-color:blue;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

效果如图：
在这里插入图片描述

为了是原来排版不受影响，可在#box2选择器的css中添加clear:left(或者是right或者是both，看具体情况)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width:100px;
            height: 100px;
            background-color: brown;
            float:left;
        }
        #box2{
            width:200px;
            height: 200px;
            background-color:blue;
            clear:left;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

效果如图：
在这里插入图片描述

当然这是元素与元素之间是上下排列关系，如果是嵌套关系，当父元素不设置宽高和浮动，子元素不浮动但设置宽高时，父元素的高默认会被子元素的高撑开，但子元素设置浮动后:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            background-color: brown;
            border: black 1px solid;
            
        }
        #box2{
            width:200px;
            height: 200px;
            background-color:blue;
            float: left;
            
        }
        /* #box1:after{
            content: '';
            clear: left;
            display: block;
        } */
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

效果是：
在这里插入图片描述

父元素变成了一条边框，浮动的子元素无法自然撑开父元素的高度，为了清除子元素浮动带来的影响，推荐在使用after伪类选择器，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            background-color: brown;
            border: black 1px solid;
        }
        #box2{
            width:200px;
            height: 200px;
            background-color:blue;
            float: left;
            
        }
        #box1:after{
            content: '';
            clear: left;
            display: block;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>