css消除浮动

最新推荐文章于 2024-08-22 17:01:19 发布

blog-lichuyan

最新推荐文章于 2024-08-22 17:01:19 发布

阅读量160

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/qq_38643776/article/details/82805236

CSS 专栏收录该内容

19 篇文章

订阅专栏

float:float 带来很多好处，但是也产生很多问题，如父容器倒塌

当一个元素设置浮动后，其他内容会环绕该浮动元素

脱离文档流

消除浮动

三种方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box {
            border: 1px solid #ccc;
            background: #fc9;
            color: #fff;
            margin: 50px auto;
            padding: 50px;

            /*方式二：给父元素添加overflow:*/
            /*overflow: auto;*/
            zoom: 1; /*zoom: 1; 是在处理兼容性问题 */
        }

        /*方式三：给父元素添加伪类 -----推荐使用*/
        .box:after{
            content: '';
            display: block;
            clear: both;
        }
        .div1 {
            width: 100px;
            height: 100px;
            background: darkblue;
            float: left;
        }
        .div2 {
            width: 100px;
            height: 100px;
            background: darkgoldenrod;
            float: left;
        }
        .div3 {
            width: 100px;
            height: 100px;
            background: darkgreen;
            float: left;
        }
        .clear {
            clear: both;
        }


    </style>

</head>
<body>
<div class="box">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <!--方式一：添加额外div-->
    <!--<div class="clear"></div>-->

</div>
</body>


</html>