专题三、清除浮动的几种方法

最新推荐文章于 2024-07-04 10:21:12 发布

Robin_Hood_

最新推荐文章于 2024-07-04 10:21:12 发布

阅读量285

点赞数

CC 4.0 BY-SA版权

分类专栏：前端问题

本文链接：https://blog.csdn.net/Rocarrot/article/details/81774074

前端问题专栏收录该内容

8 篇文章

订阅专栏

本文介绍了在CSS布局中解决浮动溢出问题的三种常见方法：通过添加具有clear属性的空元素来清除浮动；利用容器的overflow属性；以及使用伪元素配合clear属性来实现。这些方法有助于避免内容溢出容器，保持页面布局的整洁。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

专题三、清除浮动的几种方法

一、清除浮动原因：

当容器内有浮动元素或者都是浮动元素，导致不能撑起容器的高度，使得内容溢出到容器的外面而影响布局（浮动溢出）。

二、清除浮动常用方法

使用clear属性的空元素

    <style>
        .box{
            background-color: gray;
        }
        .box1,.box2{
            background-color: red;
            width: 300px;
            height: 300px;
            float: left;
        }
        .box2{
            height: 100px;
            background-color: blue;
            float: right;
        }
     .box3{
            clear: both;
        }
    </style>
</head>
<body>

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
</body>

使用CSS的overflow属性

   <style>
        .box{
            background-color: gray;
            overflow: hidden; /*或者auto*/
        }
        .box1,.box2{
            background-color: red;
            width: 300px;
            height: 300px;
            float: left;
        }
        .box2{
            height: 100px;
            background-color: blue;
            float: right;

        }
    </style>
</head>
<body>

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

利用伪元素在后边增加一个空格‘020’，并给它赋予clear属性

    <style>
        .box{
            background-color: gray;
            /*overflow: hidden;*/
        }
        .box1,.box2{
            background-color: red;
            width: 300px;
            height: 300px;
            float: left;
        }
        .box2{
            height: 100px;
            background-color: blue;
            float: right;

        }

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

        .clearfix {
            /* 触发 hasLayout */
            zoom: 1;
        }
    </style>
</head>
<body>

<div class="box clearfix">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

参考资料：https://www.cnblogs.com/ForEvErNoME/p/3383539.html