[css] 第8天 清除浮动的方式有哪些及优缺点？

[haizhilin2013]

第8天 清除浮动的方式有哪些及优缺点？

[xiangshuo1992]

这个问题刚好有思考整理过，今天刚好复习一下。
原文链接：https://xiangshuo.blog.csdn.net/article/details/52749993

回答前的唠叨：

• 在现在的实际工作当中我已经很少用浮动来布局了，真的很少，刚开始学习的时候用的还蛮多，现在Flex布局，标准文档流以及 定位 已经可以满足大部分的布局需求了。
• 浮动带来的问题是盒子塌陷问题，所以我们就来解决这个问题吧

什么是盒子塌陷？
外部盒子本应该包裹住内部的浮动盒子，结果却没有。

问题出现的原因
父元素只包含浮动元素，那么它的高度就会塌缩为零（前提就是你们没有设置高度（height）属性，或者设置了为auto，就会出现这种情况，如果父元素不包含任何的可见背景，这个问题会很难被注意到。
因为子元素设置了float属性，而float属性会把元素从标准文档流中抽离，直接结果就是外部盒子丢了两个孩子，因为内部没有其它盒子了，所以外部盒子只包裹文本节点内容，却把两个内部盒子扔在外面了。

解决方案

1. 上面分析了问题出现的原因，不难找到第一种解决方案（既然孩子丢了，那就去找呗）——给外部盒子也添加浮动

把外部盒子也从标准文档流中抽离，让它和孩子们见面。
缺点：可读性差，不易于维护（别人很难理解为什么要给父元素也添上float），而且可能需要调整整个页面布局。

2. 在外部盒子内最下方添上带clear属性的空盒子

可以是div也可以是其它块级元素，把 <div style="clear:both;"></div>放在盒内底部，用最下面的空盒子清除浮动，把盒子重新撑起来。
缺点：引入了冗余元素

3. 用overflow:hidden清除浮动
   给外部盒子添上这个属性就好了，非常简单。
   缺点：有可能造成溢出元素不可见，影响展示效果。

4. 用after伪元素清除浮动
   给外部盒子的after伪元素设置clear属性，再隐藏它
   这其实是对空盒子方案的改进，一种纯CSS的解决方案，不用引入冗余元素。

.clearfix {*zoom: 1;}
.clearfix:before,.clearfix:after {display: table;line-height: 0;content: "";}
.clearfix:after {clear: both;}

这也是bootstrap框架采用的清除浮动的方法。

题外话

其实还有一种最直接的办法：给每个盒子规定width和height，要多大给多大即可。但这并不算什么解决方案，因为这样的布局不是内容自适应的，但如果页面内容极少发生变动，这也是一个不错的方案，因为它的兼容性是毋庸置疑的。

[AricZhu]

1.通过设置父标签overflow: auto
2.通过after伪类: {display: block; content: ''; clear: both;}

[poporeki]

父元素设置overflow:hidden

.clearfix::after{
 content:'';
display:block;
height:0;
line-height:0;
clear:both;
}

[zhuoyan]

触发BFC 或 clear: both

[Konata9]

• 外层父元素使用 overflow:hidden; 属性触发 BFC，让内层的 float 不会影响外层的布局

• 使用 clear: both; 即 clearfix 类的方法，在浮动元素后面添加一个空的 div，使其 clear:both; 清除上层浮动元素带来的影响。缺点是会增加 DOM 元素；可以使用伪类 ::after + clear:both;。

   <div class="float"></div> // float: left 的元素
   <div class="clearfix"></div> // clear: both 的元素

[wezzzyang]

1. 父类设定高度
2. 父类设置 overflow:hidden/auto
3. 给父类after伪元素 clear:both
4. 讲父类变成浮动元素

[abueavan]

1 给每个盒子设定固定的width和height，直到合适为止，这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面，缺点是非自适应，浏览器的窗口大小直接影响用户体验。
2给外部的父盒子也添加浮动，让其也脱离标准文档流，这种方法方便，但是对页面的布局不是很友好，不易维护。
3给父盒子添加overflow属性。 overflow:auto; 有可能出现滚动条，影响美观。overflow:hidden; 可能会带来内容不可见的问题。
4 父盒子里最下方引入清除浮动块。最简单的有：
. 有很多人是这么解决的，但是并不推荐，因为其引入了不必要的冗余元素 。
5 after伪类清除浮动。外部盒子的after伪元素设置clear属性。这是一种纯CSS的解决浮动造成盒子塌陷方法，没有引入任何冗余元素，但是低版本IE不兼容。
https://blog.csdn.net/kirinlau/article/details/73505903

[wowsunny]

设置overflow的方法其实本质上是为父元素设置了BFC，同一思路下可以有很多的解决方案：

• 根元素
• 浮动元素
• 绝对定位元素
• overflow不为visible的元素
• display为flow-root的元素
• contain值为layout、content或paint的元素
  ……

[yyz841875845]

overflow: hidden 天下第一

[kruzabc]

清除浮动有如下思路去解决：
1.利用BFC的规则解决高度塌陷，BFC规则里有一条：浮动元素的高度参与BFC的高度计算，
因此给父元素触发BFC即可，比如父元素添加visibility:auto; 或者float:left。
2.利用clear:both属性，给父元素最下方添加元素，设置其属性为：clear:both， 即可清除浮动， 一般使用伪元素来实现。
3.直接设置父元素的高度(不推荐)。

3种方法最推荐使用第二种使用伪类来实现，最方便，副作用最小。

.clearfix {*zoom: 1;}
.clearfix:before,.clearfix:after {display: table;line-height: 0;content: "";}
.clearfix:after {clear: both;}
```
将`clearfix`添加到父元素的class即可。

[larry0442]

• clear: both; 伪类或空标签
• 直接设置宽高？只能设置在一些固定尺寸的内容，没有自适应 不太好
• bfc 详细参考在这里 bfc-MDN

[icehcong]

1、给父级 div 定义 height
原理：父级 div 手动定义 height，就解决了父就解决了父级div无法自动获取高度的问题。简单、代码少、容易掌握，但只适合高度固定的布局。
2、在结尾处添加空 div 标签并设置 clear:both

原理：在浮动元素的后面添加一个空的 div 兄弟元素，利用 css 提高的 clear:both 清除浮动，让父级 div 能自动获取高度，如果页面浮动布局过多，就要添加很多空 div，引入大量冗余元素。 3、父级 div 定义overflow:hidden 原理：超出盒子部分隐藏，不推荐使用 4、利用伪元素清除浮动，原理与空 div 一致 .clearfix: after { content: ''; display: none; visibility: hidden; height: 0; line-height: 0; clear: both; } .clearfix { zoom: 1; } 5、双伪元素清除浮动 .clearfix: before, .clearfix: after { content: ''; display: none; clear: both; } .clearfix { zoom: 1; }

[blueRoach]

• 把height定死（对于高度不固定的情况不行）
• overflow：hidden（有时候会导致内容被截断）
• 给外部元素也加上float（会使外部的元素脱离文档流，导致变形）
• :after{content: ''; font-size: 0; height: 0; display: block; clear: both;} （基本没有缺点）

[giggleCYT]

清除浮动的方式
（1）使用clear属性清除浮动。
（2）使用BFC块级格式化上下文来清除浮动。
因为BFC元素不会影响外部元素的特点，所以BFC元素也可以用来清除浮动的影响，因为如果不清除，子元素浮动则父元素高度塌陷，必然会影响后面元素布局和定位，这显然有违BFC元素的子元素不会影响外部元素的设定。

[xiezhenghua123]

父级元素设置高度
父级标签：overflow:hidden激发BFC
空标签：clear:both
伪类:clear:both

[amikly]

1.触发父元素BFC

如给父元素设置overflow:hidden，特别注意的是：在IE6中还需要触发hasLayout，例如给父元素设置zoom:1

原理是触发父级BFC后，父元素在计算高度时，浮动的子元素也会参与计算

优点

代码简洁

缺点

设置overflow:hidden容易造成不会自动换行导致超出的尺寸被隐藏掉，无法显示要溢出的元素

2.给父元素设置高度

优点

代码简洁

缺点

不够灵活，只适用于高度固定的布局

3.添加额外标签

在最后一个浮动元素的后面新加一个标签如

，并在其CSS样式中设置clear: both

优点

代码简洁，兼容性好

缺点

额外增加无语义html元素，代码语义化差，后期维护成本大

4.使用after伪元素

.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    clear: both;
    visibility:hidden;
    font-size: 0;
 }
 
 .clearfix {
    // 注意此处是为了兼容IE6和IE7浏览器，即触发hasLayoutcs
    zoom: 1;
 }

优点

符合闭合浮动思想，结构语义化正确

缺点

代码量多，因为IE6-7下不支持after伪元素，需要额外写 zoom:1来 触发hasLayout

[xiaoxiaozhiya]

• 设置本来元素的宽高
• 设置overflow：hidden
• 设置多余的元素div，设置其样式为clear：both
• 利用伪元素实现设置为不可见，而且清除浮动

[WangXi01]

1. 在后面添加一个dom设置清除浮动或者使用伪元素清除浮动
2. 利用BFC特性，父元素使用overflow:hidden

[Iambecauseyouare]

1.额外标签法：在最后一个浮动标签后，新加一个标签，给其设置clear:both
优点：通俗易懂
缺点：添加无意义标签，语义化差
2.父级添加overflow:hidden
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
3.使用伪元素before和after清除浮动
优点：符合闭合浮动思想，结构语义化正确，代码更简洁
缺点：ie6-7不支持伪元素

[lili-0923]

方法一：额外标签法

  给谁清除浮动，就在其后额外添加一个空白标签 ，给其设置clear：both。

  优点：通俗易懂，书写方便。

  缺点：添加许多无意义的标签，结构化比较差。

  clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来 。

方法二：父元素添加overflow:hidden

  通过触发BFC方式，实现清除浮动

  优点：代码简洁

  缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。

方法三：使用after伪元素清除浮动

  优点：符合闭合浮动思想，结构语义化正确。

  缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。

方法四：使用before和after双伪元素清除浮动

  优点：代码更简洁

  缺点：用zoom:1触发hasLayout.

方法五：为父元素设置高度

  缺点: 需要手动添加高度，如何后面的高度发生变化，还要再次修改高度，给后期的维护带来麻烦。

  优点: 简单粗暴直接有效，清除了浮动带来的影响

[pengsir120]

1.在包含浮动元素容器的末尾增加一个带有clear属性的空div。缺点：需要在HTML中添加不必要的标记才能实现本应该由CSS实现的效果
2.选中包含浮动元素容器末尾的伪元素，设置display:block; content: " "; clear:both; 优点：不需要额外添加HTML元素；缺点：浮动元素的外边距不会折叠到清楚浮动容器的外部，而非浮动元素的外边距则会正常折叠
3.选中包含浮动元素容器前端和末尾的伪元素，设置display：table；content：“ ”；然后给末尾的伪元素单独清楚浮动；优点：所有子元素的外边距都会包含在容器的顶部和底部之间