清除浮动的方法总结

最新推荐文章于 2023-03-12 16:05:12 发布

@长存

最新推荐文章于 2023-03-12 16:05:12 发布

阅读量105

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_44040444/article/details/109191419

版权

清除浮动的背景:

在一个标准流的块级元素中,如果它的高度是子元素撑开的且子元素设置了浮动流定位,会导致它的(父元素)的高度塌陷;
举个例子:

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            background-color: burlywood;
            border: 1px solid #666;
        }

        .box>div {
            float: left;
            width: 100px;
            height: 100px;
            background-color: cadetblue;
        }

 
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

显示效果:
在这里插入图片描述
可以看到父元素box的高度塌陷了;

解决方法:

可以在父元素添加一个子元素(必须是块级元素),来清除浮动的影响;

  <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            background-color: burlywood;
            border: 1px solid #666;
        }

        .box>div {
            float: left;
            width: 100px;
            height: 100px;
            background-color: cadetblue;
        }
        .clearfix{
            clear:both;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <p class="clearfix"></p>
    </div>
</body>

在这里插入图片描述
这里可以看到父元素被子元素顺利撑开.

若想不添加子元素来清除浮动可以在父元素添加属性 overflow:hidden;

    * {
            margin: 0;
            padding: 0;
        }

        .box {
            background-color: burlywood;
            border: 1px solid #666;
            overflow: hidden;//加在了这里
        }

        .box>div {
            float: left;
            width: 100px;
            height: 100px;
            background-color: cadetblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

通过伪类来清除浮动

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            background-color: burlywood;
            border: 1px solid #666;
        }

        .box>div {
            float: left;
            width: 100px;
            height: 100px;
            background-color: cadetblue;
        }
        //注意: display:属性值可以是block也可以是table,用块级元素才能清除浮动
        //且content:"";这一句也不能缺;
        .box::after {
            display: block;
            content: "";
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

@长存

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除浮动的方法总结

清除浮动的背景:在一个标准流的块级元素中,如果它的高度是子元素撑开的且子元素设置了浮动流定位,会导致它的(父元素)的高度塌陷;举个例子: <style> * { margin: 0; padding: 0; } .box { background-color: burlywood; border: 1px solid #666;
复制链接

扫一扫