如何用css clear-fix清除浮动_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何用css clear-fix清除浮动

2025-10-08

浏览次数：次

返回列表

浮动导致父容器高度塌陷，需清除浮动影响。2. 常用方法包括：使用::after伪元素清除浮动，兼容性好；通过overflow:hidden触发BFC，但可能裁剪溢出内容；推荐使用display:flow-root创建BFC，无副作用且语义清晰。新项目建议优先采用flow-root方案。

如何用css clear-fix清除浮动

当元素使用了浮动（float）后，可能会导致父容器无法正确包裹子元素，造成布局错乱。这时就需要使用 clear-fix 来清除浮动的影响。下面介绍几种常用的 CSS clear-fix 方法。

什么是浮动带来的问题

如果一个容器内的子元素都设置了 float: left 或 float: right，父容器往往会出现高度塌陷——即父元素的高度无法被子元素撑开，影响后续布局。

方法一：使用伪类 :after 添加 clear

这是最常见且兼容性好的 clear-fix 写法，通过在容器末尾插入一个隐藏的块级元素并清除浮动。

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

将这个类应用到包含浮动元素的父容器上即可：

<div class="clearfix">
  <div style="float: left;">左浮</div>
  <div style="float: right;">右浮</div>
</div>
</font><H3>方法二：使用 overflow 触发 BFC</H3><p>给父容器设置 <strong>overflow: hidden</strong> 或 <strong>auto</strong> 可以触发块级格式化上下文（BFC），从而包含浮动元素。</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2356">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/176118961795973.png" alt="青泥AI">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2356">青泥AI</a>
                            <p>青泥学术AI写作辅助平台</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="青泥AI">
                                <span>360</span>
                            </div>
                        </div>
                        <a href="/ai/2356" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="青泥AI">
                        </a>
                    </div>
                <font face="Courier New"><pre class="brush:php;toolbar:false;">
.container {
  overflow: hidden; /* 或 auto */
}