「CSS」常见的清除浮动方法

最新推荐文章于 2024-08-28 16:19:38 发布

瓜冬瓜

最新推荐文章于 2024-08-28 16:19:38 发布

阅读量69

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_42561383/article/details/98533971

版权

CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素，浮动元素会造成父元素高度塌陷，所以当我们设置float后，需进行相应的清除浮动操作。

方法一：创建BFC

BFC的全称为 Block Formatting Context，即块级格式化上下文。一个BFC有如下特性：

处于同一个BFC中的元素相互影响，可能会发生margin collapse（高度塌陷）；
BFC在页面上是一个独立的容器，容器里面的子元素不会影响到外面的元素，反之亦然；
计算BFC的高度时，考虑BFC所包含的所有元素，包括浮动元素也参与计算；
浮动盒的区域不会叠加到BFC上。

创建BFC的方法如下：

浮动（float的值不为none）；
绝对定位元素（position的值为absolute或fixed）；
行内块（display为inline-block）
表格单元（display为table、table-cell、table-caption等HTML表格相关属性）；
弹性盒（display为flex或inline-flex）；
overflow不为visible。

方法二：额外标签

在浮动的盒子之下再放一个标签，在这个标签中使用clear: both;，来清除浮动对页面的影响。
缺点：这种清除浮动的方式会增加页面的标签，造成结构的混乱。

方法三：使用伪元素

    <style>
        .parent:after{	    /*伪元素是行内元素 正常浏览器清除浮动方法*/
            content: "";
            display: block;
            clear:both;
        }
    </style>

<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>