清除浮动最常用的四种方法

2023-09-30 17:06:04

1. 给父元素设置宽高

2. 额外标签法

在最后一个浮动标签后，新加一个标签，给其设置 clear：both；

新增无意义标签，语义化差，不推荐。

3. 父级元素加overflow属性

通过触发BFC实现清除浮动

overflow:hidden;

缺点：无法显示要溢出的元素。

4. 使用after伪元素清除浮动（推荐）

<div class="div1 clearfix">
        <div class="left"></div>
        <div class="right"></div>
</div>
    
<div class="div2"></div>

    <style>
        .div1 {
            background-color: red;
            border: 1px solid #666;
        }
        .div2 {
            background-color: red;
            border: 1px solid #666;
            height: 100px;
            margin-top: 10px;
        }
        .left {
            float: left;
            width: 20%;;
            height: 200px;
            background-color: green;
        }
        .right {
            float: right;
            width: 30%;
            height: 80px;
            background-color: yellow;
        }
        .clearfix::after {
            content: "";
            clear: both;
            visibility: hidden;
            height: 0;
            display: block;
        }
    </style>

清除浮动最常用的四种方法

码农公寓

相关文章