清除浮动css

最新推荐文章于 2025-07-29 08:34:54 发布

原创最新推荐文章于 2025-07-29 08:34:54 发布 · 301 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文探讨了CSS浮动产生的原因，即浮动元素脱离文档流导致的父元素高度无法撑开问题。介绍了三种清除浮动的方法：1) 使用额外空元素并设置`clear:both`；2) 利用伪元素`::after`结合`clear:both`；3) 通过触发BFC（块级格式化上下文）如设置`overflow:hidden`。每种方法的优缺点也被详细阐述，帮助开发者选择合适的清除浮动策略。

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

浮动产生原因

由于浮动元素会脱离文档流，所以给浮动元素设置高度，也无法撑开父元素。

    <div style="position: relative; background-color: blue; width: 900px; height: 900ox;   ">
        <div style="float: left; height: 200px; background-color: rebeccapurple;  "> 1</div>
        <div style="float: left; height: 200px; background-color: red;  ">  2</div>
        <div style="float: left; height: 200px; background-color: green;  "> 3</div>
        <div style="float: left; height: 200px; background-color: gold;  ">4 </div>
       
    </div>

在这里插入图片描述

使用clear : both

在父元素下面设置一个空元素，然后给空元素设置clear:both。这样就能消除浮动的影响，让子元素能撑开父元素。
缺点：会产生大量的空元素影响性能

伪元素清除浮动（推荐）

首先要知道伪类和伪元素的区别

伪类用于定义元素的特殊状态,一个元素可以有多个伪类。而一个元素只能有一个伪元素

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

因为伪元素不会出现在dom中，所以操作大量的伪元素也不会影响性能。一个元素只能有一个::after！

给父元素设置一个**::after**的伪元素，并且给伪元素设置为块级空元素，然后清除浮动

        .clear_flot::after {
            clear: both;
            content: '';
            display: block;
        }

触发bfc清除浮动

因为触发了bfc，就会生成一个独立的渲染区域。子元素浮动后的宽高父元素也能计算进去，从而达到清除浮动影响的效果。

触发bfc有很多种方式

float的值不为none
overflow的值不为visible
display的值为table-cell、tabble-caption和inline-block之一
position的值不为static或则releative中的任何一个

父元素设置overflow:hidden
在这里插入图片描述

给父元素float清除浮动

缺点：父元素也浮动了，会影响布局

    <div style="position: relative; background-color: blue; width: 900px; height: 900ox;  float: left;">
        <div style="float: left; height: 200px; background-color: rebeccapurple;  "> 1</div>
        <div style="float: left; height: 200px; background-color: red;  ">  2</div>
        <div style="float: left; height: 200px; background-color: green;  "> 3</div>
        <div style="float: left; height: 200px; background-color: gold;  ">4 </div>
        
    </div>

在这里插入图片描述