在CSS布局中float属性经常会被用到，但使用float属性后会使其在普通流中脱离父容器，让人很苦恼
1 浮动带来布局的便利，却也带来了新问题
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Clear float</title> 6 <style type="text/css"> 7 .container{ 8 margin: 30px auto; 9 width:600px;10 height: 300px;11 }12 .p{13 border:solid 3px #a33;14 }15 .c{16 width: 100px;17 height: 100px;18 background-color: #060;19 margin: 10px;20 float: left;21 }22 </style>23 </head>24 <body>25 <p class="container">26 <p class="p">27 <p class="c"></p>28 <p class="c"></p>29 <p class="c"></p>30 </p>31 </p>32 </body>33 </html>
我们希望看到的效果是这样的
但结果却是这样的
父容器并没有把浮动的子元素包围起来，俗称塌陷，为了消除这种现象，我们需要一些清除浮动的技巧。
2 如何清理浮动
清理浮动一般有两种思路
利用 clear属性，清除浮动
使父容器形成BFC
分别看一下
2.1 利用 clear属性，清除浮动
clear属性是个什么东东呢？clear 属性规定元素的哪一侧不允许其他浮动元素，修改一下刚才代码
<p class="p"> <p class="c"></p> <p class="c" style="clear:left;"></p> <p class="c"></p></p>
第二个p添加了clear:both属性后，其左侧的p（第一个p）不再浮动，所以后面的p都还行(huan hang)了。我们可以利用这点儿在父容器的最后添加一个空的p，设置属性clear:left，这样就可以达到我们目的了。
2.1.1 添加空p清理浮动
对我们刚才代码稍作修改
<p class="p"> <p class="c"></p> <p class="c"></p> <p class="c"></p> <p style="clear:left;"></p></p>
也就是在父容器最后添加
<p style="clear:left;"></p>
看看效果
果真好使了，有些同学看了后可能感觉奇怪，为什么想上一个例子修改第二个p
<p class="c" style="clear:left;"></p>
没有变成这样的效果
说一下自己的拙见，clear:left属性只是消除其左侧p浮动对它自己造成的影响，而不会改变左侧p甚至于父容器的表现，在父容器看来，三个p还都是float的，所以高度依旧塌陷。但是我们在最后添加了一个非浮动的p，由于它有clear:left属性，所以它会按照左侧p不浮动来定位自己，也就是定位到下一行，而父容器看到有一个非浮动、普通流的子元素元素，会将其包围，这样造成了顺便也把三个浮动元素也包裹起来的效果，高度不再塌陷（不知道说明白没有或者这种理解对不对，还望明白的同学指点）。
当然除了添加p，还可以添加br等其它html元素，原理相同，不再赘述。
2.1.2 使用CSS插入元素
上面的做法浏览器兼容性不错，但是有个很大的问题就是向页面添加了内容来达到改变效果的目的，也就是数据和表现混淆，既然是变现，看看怎么使用CSS来解决这一问题。根本的做法还是向父容器最后追加元素，但我们可以利用CSS的:after伪元素来做此事。
添加一个类 floatfix
.floatfix:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:left;
}
对父容器添加此类
<p class="p floatfix"> <p class="c">1</p> <p class="c">2</p> <p class="c">3</p></p>
这样我们就可以看到正确效果了
简单解释一下，对父容器添加floatfix类后，会为其追加一个不可见的块元素，然后设置其clear属性为left，和刚才原理类似。
2.1.3 大师手笔
Nicolas Gallagher 在A new micro clearfix hack中提供了一种看起来更清爽的做法
.floatfix:after{
content:"";
display:table;
clear:both;
}
Nicolas Gallagher原文中还有:before是为了处理margin边距重叠，本文中没有列出来。
有同学会提出来了上面方法看起来不错，但是IE6、7不支持伪元素怎们办？这就需要我们使用BFC/haslayout的姿势了
2.2 使父容器形成BFC
经过了前些日子园里关于BFC的狂轰滥炸相信大家都对BFC有了一定的了解，不过瘾的同学可以看看 Block Format Content，BFC有三个特性
BFC会阻止垂直外边距（margin-top、margin-bottom）叠加
BFC不会重叠浮动元素
BFC可以包含浮动
我们可以利用BFC的第三条特性来“清浮动”，这里其实说清浮动已经不再合适，应该说包含浮动。也就是说只要父容器形成BFC就可以，简单看看如何形成BFC
float为 left|right
overflow为 hidden|auto|scroll
display为 table-cell|table-caption|inline-block
position为 absolute|fixed
我们可以对父容器添加这些属性来形成BFC达到“清浮动”效果
2.2.1 利用float来使父容器形成BFC
简单修改一下代码
<p class="p" style="float:left;"> <p class="c">1</p> <p class="c">2</p> <p class="c">3</p></p>
这样我们可以得到结果
我们可以看到父容器高度没有塌陷，但是长度变短了，因为p应用float‘后会根据内容来改变长度，这个在很多时候很有用，但是我们不希望有这种效果怎么办？
2.2.2 使用BFC的其它局限
上面提到使用BFC使用float的时候会使父容器长度缩短，而且还有个重要缺陷——父容器float解决了其塌陷问题，那么父容器的父容器怎么办？难道要全部使用folat吗（确实有这种布局方式倒是）。BFC的几种方式都有各自的问题，overflow属性会影响滚动条和绝对定位的元素；position会改变元素的定位方式，这是我们不希望的，display这几种方式依然没有解决低版本IE问题。。。
看起来还是第一种方式比较好，可是低版本IE该怎么办呢？
2.2.3 hasLayout
我们知道在IE6、7内有个hasLayout的概念，很多bug正式由hasLayout导致的，当元素的hasLayout属性值为false的时候，元素的尺寸和位置由最近拥有布局的祖先元素控制。当元素的hasLayout属性值为true的时候会达到和BFC类似的效果，元素负责本身及其子元素的尺寸设置和定位。我们可以利用这点儿在IE6、7下完成清浮动，先看看怎么使元素hasLayout为true
position: absolute
float: left|right
display: inline-block
width: 除 “auto” 外的任意值
height: 除 “auto” 外的任意值
zoom: 除 “normal” 外的任意值
writing-mode: tb-rl
在IE7中使用overflow: hidden|scroll|auto 也可以使hasLayout为true
3 一个相对靠谱的解决方案
经过上面的比较我们可以得出一个相对靠谱的解决方案
在IE+、现代浏览器上使用伪元素
在IE6、7使用hasLayout
具体应该使用哪种方式来使元素hasLayout为true呢？相对而言zoom：1比较好，因为不会造成其它影响。想造成只在IE6、7上使用某些CSS的效果，我们还得需要一些CSS hack的知识，感兴趣同学可以看看 CSS hack，我们可以写出这样的CSS
.floatfix{
*zoom:1;
}.floatfix:after{
content:"";
display:table;
clear:both;
}
4 最后
虽然我们得出了一种浏览器兼容的靠谱解决方案，但这并不代表我们一定得用这种方式，很多时候我们的父容器本身需要position：absolute等形成了BFC的时候我们可以直接利用这些属性了，大家要掌握原理，活学活用。总而言之清理浮动两种方式
利用 clear属性，清除浮动
使父容器形成BFC
以上是CSS清浮动处理的详细内容。更多信息请关注PHP中文网其他相关文章！
使您的第一个自定义苗条过渡Mar 15, 2025 am 11:08 AMSvelte Transition API提供了一种使组件输入或离开文档（包括自定义Svelte Transitions）时动画组件的方法。
让我们使用（x，x，x，x）来谈论特殊性Mar 24, 2025 am 10:37 AM前几天我只是和埃里克·迈耶（Eric Meyer）聊天，我想起了我成长时代的埃里克·迈耶（Eric Meyer）的故事。我写了一篇有关CSS特异性的博客文章，以及
您如何使用CSS创建文本效果，例如文本阴影和渐变？Mar 14, 2025 am 11:10 AM文章讨论了使用CSS来获得阴影和渐变等文本效果，优化它们以进行性能并增强用户体验。它还列出了初学者的资源。（159个字符）
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。
Dreamweaver CS6
视觉化网页开发工具
安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境，用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问，并防止学生使用未经授权的资源。
WebStorm Mac版
好用的JavaScript开发工具
SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。
