是为了解决 父元素因为子元素浮动而引起的内部高度为 0 的问题.
布局:
- <body>
- <div class="father">
- <div class="big">
- 盒子 1
- </div>
- <div class="small">
- 盒子 2
- </div>
大盒子
</div>
</body>
样式:
- <style>
- .father{ border: 1px solid darkred; width: 400px; } .big{ width: 100px;
- height: 100px; background-color: orangered; } .small{ width: 50px; height:
- 50px; background-color: mediumpurple; }
- </style>
盒子 1 和 2 都设置浮动后
- .big, .small{
- float: left;
- }
我自己是一名从事了多年开发的 web 前端老程序员, 目前辞职在做自己的 Web 前端私人定制课程, 今年年初我花了一个月整理了一份最适合 2019 年学习的 Web 前端学习干货, 各种框架都有整理, 送给每一位前端小伙伴, 想要获取的可以添加我的 Web 前端交流群 600610151, 即可免费获取.
二, 解决方法
1. 额外标签法
在最后一个浮动标签后, 新加一个标签, 给其设置 clear:both;
- <div class="fahter">
- <div class="big">
- big
- </div>
- <div class="small">
- small
- </div>
- <div class="clear">
- 额外标签法
- </div>
- </div>
- // CSS: .clear{ clear:both; }
优点: 通俗易懂, 方便
缺点: 添加无意义标签, 语义化差. 不推荐使用!
2. 父元素添加 overflow 属性
通过触发 BFC 方式, 实现清除浮动.
- .father{
- border: 1px solid darkred;
- width: 400px;
- overflow: hidden;
- }
优点: 代码简洁
缺点: 内容增多的时候容易造成不会自动换行导致内容被隐藏掉, 无法显示要溢出的元素, 不推荐使用!
3. 使用 after 伪元素清除浮动 (推荐使用)
- // 先给父元素增加一个类名 clearfix , 然后在样式中添加如下内容
- .clearfix:after{
- display: block;
- content: '';
- clear: both;
- visibility:hidden; // 允许浏览器渲染, 但不显示出来, 这样才能实现清除浮动.
- }
- .clearfix{
- *zoom: 1;/*ie6 清除浮动的方式, * 号只有 IE6-IE7 执行, 其他浏览器不执行 */
- }
优点: 符合闭合浮动思想, 结构语义化正确
缺点: ie6-7 不支持伪元素 :after, 使用 zoom:1 触发 hasLayout.
4. 使用 before 和 after 双伪元素清除浮动
- .clearfix:after, .clearfix:before{
- content: "";
- display: block;
- }
- .clearfix:after{
- clear: both;
- }
- .clearfix{
- *zoom: 1;
- }
优点: 代码更简洁
缺点: 用 zoom:1 触发 hasLayout.
来源: http://www.jianshu.com/p/8a1860a3e607