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

Answer 1

这个问题刚好有思考整理过，今天刚好复习一下。
原文链接：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，要多大给多大即可。但这并不算什么解决方案，因为这样的布局不是内容自适应的，但如果页面内容极少发生变动，这也是一个不错的方案，因为它的兼容性是毋庸置疑的。

Answer 2

父元素设置overflow:hidden

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

Answer 3

• 外层父元素使用 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 的元素

Answer 4

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

Answer 5

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

Answer 6

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

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