清除浮动的用法clearfix

最新推荐文章于 2025-05-17 10:02:22 发布

原创最新推荐文章于 2025-05-17 10:02:22 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

xhtml/div/css 同时被 3 个专栏收录

21 篇文章

订阅专栏

常用代码

12 篇文章

订阅专栏

ie6 常见问题及BUG

7 篇文章

订阅专栏

本文深入探讨了浮动清除在网页布局中的应用，通过对比多种方法，最终推荐了一种高效且兼容性强的解决方案，并提供了实际代码示例。此外，还介绍了如何在层之间使用特定的元素来轻松清除浮动，确保网页布局的整洁与灵活性。

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

经过各种清除浮动的比较，以及日常的应用，发现最好最完美的一种方法就是这个：

代码如下，

css:

.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfix{*zoom:1;}//只针对IE6/7

HTML:

<div class="clearfix" style="border:1px solid #000;">
 <div style="float:left; height:50px; width:500px; background:#ccc;"></div>
 <div style="float:left; height:50px;width:40px; background:#f60;"></div>

</div>

补充一个层之间的清除浮动也可以用这个：

.clear{clear:both;height:0;font-size: 1px;line-height: 0px;}//清除浮动

<br class="clearfloat" /><!-- 用于清除浮动的元素 -->

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿聪世家

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS中的清除浮动（clearfix）是什么？如何使用它？

祈澈菇凉

10-21

1585

然后，通过display: table将伪元素转换为块级元素，并使用clear: both清除浮动，使父元素能够正确包含浮动元素，从而避免高度塌陷问题。在CSS中，清除浮动（clearfix）是一种解决元素浮动造成的父元素高度塌陷的技术。当一个元素浮动后，其父元素可能会因为没有包含浮动元素而无法正确计算高度，导致父元素的高度塌陷，影响布局。清除浮动的常见方法是使用clearfix技术，通过在父元素上应用特定的样式规则来修复高度塌陷问题。上，以确保该父元素正确包含内部的浮动元素。

浅谈CSS清除浮动（ClearFix）的方法

Geolage Wu 的博客

07-31

9158

为什么要清除浮动？可以很简洁地说，清除浮动就是为了清除浮动元素产生的不良影响。浮动带来的负面影响 1、背景无法显示 2、边框无法撑开 3、margin、padding设置值无法正确显示清除浮动的方法 1. 给父元素设置一定的高度height 2.使用css的clear属性 3. 使用“隔墙法” 4. 使用 :after伪元素 5. 使用 overflow属性 6. 给父元素设置display: table

参与评论您还未登录，请先登录后发表或查看评论

一些常用的html/CSS效果---小技巧

weixin_30519071的博客

01-12

129

我常用的重置样式表reset.css /*===============基础信息================*/ *{border: 0;padding: 0;margin: 0;} table {border-collapse:collapse;border-spacing:0;} ol,ul {list-style:none;} h1,h2,h3,h4,h5,h6 {fon...

【css】浮动与clearfix（清除浮动）

m0_62811051的博客

03-18

1452

我们首先要知道，在浮动布局中父元素的高度默认是被子元素撑开的。当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑开父元素的高度，导致父元素的高度丢失，高度丢失以后，其下的元素会自动上移，导致页面混乱。container之中包含一个 item 子元素，代码如下item此时，我给 item 加了 margin-top: 30px ，本来这时候我期待的结果是，item 块本身应该距离 container 青色区域的上边界 30px。

掌握CSS清除浮动技巧：clearfix的应用

热门推荐

FEWY的博客

04-02

7万+

说明本文适合知道HTML 与 CSS基础知识的读者，或者想要了解清除浮动背后原理的读者！1.什么是浮动首先我们需要知道定位元素在页面中的位置就是定位，解决问题之前我们先来了解下几种定位方式 1、普通流定位 static（默认方式）普通流定位，又称为文档流定位，是页面元素的默认定位方式页面中的块级元素：按照从上到下的方式逐个排列页面中的行内元素：按照从左到右的方式逐个排列但是如

双伪元素清除浮动，清除浮动（clearfix）的作用

lanheit的博客

02-18

5783

一般大家在做网页的时候会先做header头部和footer底部，在做电商网页主体的时候由于不知道商品数量的多少，所以一般不会给高度height，这样就会导致底部和主体body部分混乱。body部分的浮动元素脱标不再占有原来的位置，这样就会出现底部的标准流上移，body中的脱标元素浮在上面进而导致页面混乱。清除浮动之前清除浮动之后推荐使用伪元素清除浮动的解决方法，，最常用的解决方法分享。 /* .clearfix::before, .clearfix::after { c.

清除浮动 clearfix:after

Dreamy_LIN的博客

05-15

444

现象：在父元素div内，添加两个子元素，都为float。会发现父元素没有包裹子元素（高度塌陷）。原因是子元素由于增加浮动而脱离标准流（块级元素，从上到下排列，称为标准流）导致的，如图一。此时往父元素同级或内部增加元素，会被遮挡或布局错乱，如图二。图一图二代码部分： <style> header { border: 2px solid yellow; } header > div:nth-child(1) {

清除浮动(clearfix 和 clear)的用法示例介绍

09-22

`clearfix`是一种更简洁的清除浮动方法，它不涉及额外的HTML元素。`clearfix`类通常会应用到包含浮动元素的父容器上，通过CSS的伪类选择器来实现清除浮动的效果。在现代浏览器中，我们可以使用`:before`和`:after`...

浅谈css清除浮动(clearfix和clear)的用法

09-24

在本文中，我们将讨论两种常用的清除浮动的方法：使用clearfix类和使用clear属性。 1. 使用clearfix类 clearfix类是一种非常流行的清除浮动方法。开发者创建一个名为clearfix的伪元素，使其具有清除浮动的特性，并...

.clear 万能清除浮动(clearfix:after)

12-04

为了解决这个问题，开发者通常会使用“清除浮动”（clearing the float）的方法，`.clear 万能清除浮动`（clearfix:after）就是一种常用的解决方案。 `.clear 万能清除浮动` 实际上是一种 CSS 技巧，用于修复由于...

css hack之清除浮动(clearfix)

09-25

为了解决这个问题，开发者们发展出了一系列的“清除浮动”技巧，其中一种常用的方法就是clearfix。本文主要讨论了如何使用clearfix来清除浮动，并探讨了几种不同的实现方式及其优缺点。首先，最传统的清除浮动方法...

纯CSS实现点击滚动翻页的效果

acongshijia的专栏

03-05

3726

dl { position:absolute; width:389px; height:154px; border:10px solid #eee; } dd { margin:0; width:389px; height:154px; overflow:hidden; } img { border:1px solid black } dt { position:abso

css3 箭头上下左右

acongshijia的专栏

12-22

3496

.u-icon-arr { position: absolute; top: 50%; right: 15px; width: 12px; height: 12px; border-style: solid; bor

移动前端自适应解决方案(rem font-size)

acongshijia的专栏

03-09

3440

var deviceWidth = document.documentElement.clientWidth; if(deviceWidth > 640) { deviceWidth = 640; } document.documentElement.style.fontSize = deviceWidth / 6.4 + '

css3的transition属性详解

acongshijia的专栏

11-26

1790

W3C标准中对css3的transition这是样描述的： “css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。” transition主要包含四个属性值：执行变换的属性：transition-property, 变换延续的时间：transition-dur

用纯css画个三角形，并且用CSS3来进行翻转

acongshijia的专栏

11-29

1746

三角形翻转的效果，大家想必见过，这里就把相关代码贴下，大家可以应用哦，当然翻转效果暂时不支持IE 6 7 8， 1、纯CSS做个三角 .rightdirection { width:0;height:0; line-height:0; border-width:20px; border-style:solid; border-color:transparent transp

清除浮动的clearfix技巧是什么？

11-15

清除浮动（Clearing Floats）是一个常见的网页布局技术，特别是使用浮动 (`float`) 实现自适应布局时，因为浮动元素会改变正常的文档流，可能导致其后的元素无法准确地跟随排列。以下是几种常用的清除浮动的技巧： 1. **`clear` 属性**：在需要清除浮动的元素上使用 `clear` 属性，例如 `clear: both` 或 `clear: left/right`。但这不是最推荐的方式，因为它可能会影响其他样式，并且在 CSS3 中不被广泛支持。 ```css .clearfix::after { content: ""; display: table; clear: both; } ``` 在这个例子中，`:after` 伪元素在元素之后插入一个清除浮动的内容区域。 2. **父容器的 clearfix**：给浮动元素的父容器添加特殊的样式，比如使用 `overflow` 和 `hidden`，或是利用 BFC（Block Formatting Context）。 ```css .clearfix { overflow: hidden; } ``` 或者 ```css .clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } ``` 这里通过创建一个新的 BFC 来包裹浮动元素。 3. **Flexbox 清除**：对于 Flexbox 布局，可以直接在需要放置内容的地方加上 `flex: 1` 或者 `flex-grow: 1` 来挤压浮动元素。 4. **Grid 清除**：在 Grid 布局中，可以利用 `grid-auto-flow: row dense` 或者在需要清理的地方添加 `grid-row-gap` 或 `grid-column-gap`。选择哪种方法取决于具体的布局需求和兼容性要求。记得，现代前端开发更倾向于使用 Flexbox 或 Grid 这样的现代布局模型来避免此类问题。