清除浮动（clearfix）的常见方法

Kahn 发布于2019-08-30 13:19 / 1347人阅读

摘要：此时可能会对周围的布局产生影响，所以清除浮动，显得十分重要。主要的方法一使用属性添加伪元素通过在父元素后面添加一个伪元素，设置为并清除左右浮动解决问题。目前这个方法是最新的。总结如上所述，清除浮动有两大方法，使用属性和建立。

背景

当一个父元素包含的子元素都设置为float的时候，父元素的高度会出现坍塌的现象（见下图）。此时可能会对周围的布局产生影响，所以清除浮动，显得十分重要。

主要的方法 一、使用clear属性 1.添加伪元素

通过在父元素后面添加一个伪元素，设置为 block并清除左右浮动解决问题。目前这个方法是最新的。

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

可能有些代码有添加::before,且display：table

.container::after,.container::before{
    content:" ";
    display:table;
}   
.container::after{
    clear:both;
}

实际上添加的部分跟浮动并没有关系，他们的作用是防止子元素的margin-top发生重叠。
但添加::before就必须将display设置为table。主要原理：display设置为table时会出现一个匿名表格单元格（anonymous table-cell），从而创建一个新的BFC（下文会提及），根据BFC的布局规则，会使margin-top不重叠。这里只是解释说明有些代码出现这种写法的原因，如果没有防止重叠的需求，完全可以精简代码，使用上一种写法。

有时还会在代码的最后写上

.container {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

这里主要是为了兼容IE6/7.

还有一种相似的做法

 .clearfix:after{
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
}
.clearfix{
    zoom:1;
}

将display设置为block是因为:after是伪元素，要想获得clear属性必须将他转换为block。添加visibility: hidden;height: 0;是让包含块末端看起来不那么乱，所以就直接隐藏起来。

2、添加标签

最简单除粗暴的方法就是直接在包含块末端添加一个标签，并且使用clear属性。

但这种做法在HTML中语义不明确，一旦代码量增加，后期比较难维护。慎用！

二、触发浮动元素父元素的BFC（什么是BFC？之前写的另一篇文章视觉格式化模型之BFC） 1、使用overflow属性

.container {
    overflow: hidden; /* Clearfix! */
    zoom: 1;  /* Triggering "hasLayout" in IE */
    display: block; /* Element must be a block to wrap around contents. Unnecessary if only using block-level elements. */
}

这里主要是将overflow设置为非visible值，建立一个BFC，根据BFC的布局规则将浮动子元素包含进来。需要注意的是，container 里面的内容是否有溢出的风险。

2、使用float属性

直接将包含块设置为float。即可建立BFC。但这种做法不推荐，因为整体浮动会影响其他的布局。

总结

如上所述，清除浮动有两大方法，使用clear属性和建立BFC。围绕这两方面可以使用很多小技巧。这里只是罗列几个常见的方法，并详细解释每条语句的作用，虽然有点啰嗦，但重在理解。如果有更好的方法也欢迎补充。

云服务器 GPU云服务器的清除方法清除浮动常见的数据分析方法 js常见方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115476.html

CSS学习摘要-浮动与清除浮动

摘要：为了实现这个效果，我们需要清除浮动。元素被向下移动用于清除之前的左右浮动。块格式化上下文对浮动定位与清除浮动都很重要。浮动定位和清除浮动时只会应用于同一个内的元素。且为了不影响接下来的文档标准流，往往也要收尾做出清除浮动。以下从浮动到BFC的段落摘自MDN 网络开发者float 浮动float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流...

番茄西红柿 2019-04-23 13:40 评论0 收藏0
前端入门-day3(CSS中浮动和清除浮动)

摘要：写在前面浮动是中一个相对比较麻烦的属性，与之伴随的通常是清除浮动。清除浮动因此，当我们用到了浮动，又不想出现这种情况的时候，就需要清除浮动。因此，注意浮动的使用场景，并且在需要的时候清除浮动，就可以很好的控制浮动啦写在前面浮动是CSS中一个相对比较麻烦的属性，与之伴随的通常是清除浮动。今天我们一起来搞定浮动。常见的用法事实上，当我们将一个元素设置成浮动时，达到的效果如下图： s...

googollee 2019-08-29 17:05 评论0 收藏0
CSS入门指南-2：盒子模型、浮动和清除

摘要：会在元素内容而不是元素后插入一个伪元素使用意味着中新增的子元素会被清除左右浮动元素。这一篇主要介绍了盒子模型，浮动和清除。这是CSS设计指南的读书笔记，用于加深学习效果。上一篇介绍了css 的工作原理，这一篇主要介绍盒子模型和浮动。盒子模型所谓盒子模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。这些盒子们都要按照可见版式模型在页面上排布。可见的页面版式主要由三个属性...

ConardLi 2019-08-29 12:59 评论0 收藏0
CSS入门指南-2：盒子模型、浮动和清除

摘要：会在元素内容而不是元素后插入一个伪元素使用意味着中新增的子元素会被清除左右浮动元素。这一篇主要介绍了盒子模型，浮动和清除。这是CSS设计指南的读书笔记，用于加深学习效果。上一篇介绍了css 的工作原理，这一篇主要介绍盒子模型和浮动。盒子模型所谓盒子模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。这些盒子们都要按照可见版式模型在页面上排布。可见的页面版式主要由三个属性...

charles_paul 2019-08-01 17:13 评论0 收藏0
css随堂笔记（三）

摘要：随堂笔记三关于背景图片设置背景图片图片的路径背景图片位置方位名词背景位置如果只设置一个方位词，另外一个默认居中如果设置的值是两个方位词，与顺序无关数值背景位置如果设置的值是数字一个值得时候，表示水平方向的位移，垂直方向默认居中两个值得Css随堂笔记（三） 1 关于背景图片 A 设置背景图片：background-image：url(图片的路径)； B 背景图片位置： backgrou...

focusj 2019-04-23 13:26 评论0 收藏0