Fe-interview: [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种方法最推荐使用第二种使用伪类来实现，最方便，副作用最小。
`css .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元素的子元素不会影响外部元素的设定。