CSS清除浮动

最新推荐文章于 2024-09-05 04:25:37 发布

Web_阿凯

最新推荐文章于 2024-09-05 04:25:37 发布

阅读量113

点赞数

分类专栏： CSS 文章标签： CSS清除浮动

本文链接：https://blog.csdn.net/weixin_45122120/article/details/90769586

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一般在项目开发中，使用浮动的次数是非常多的，浮动好但是也会带来一定的坏处。

如

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css" media="screen">
        .item {
            width: 300px;
            height: 400px;
            border: 1px solid red;
            float: left;
        }
        .bottom {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

    <div class="bottom"></div>
</body>
</html>

运行结果如图
在这里插入图片描述
想要的效果是粉红色的方块在4个矩形的下面，可是由于浮动的影响类似定位脱离文

档流。所以，我们需要清楚浮动，需要注意的是我们要在需要清除浮动的下一个兄弟

节点中添加clear:both

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css" media="screen">
        .item {
            width: 300px;
            height: 400px;
            border: 1px solid red;
            float: left;
        }
        .bottom {
            width: 200px;
            height: 200px;
            background-color: pink;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

    <div class="bottom"></div>
</body>
</html>

可以看到最终的效果已实现，粉红色方块到了4个矩形的下面
在这里插入图片描述