fe-interview
fe-interview copied to clipboard
haizlin
[css] 第8天 清除浮动的方式有哪些及优缺点？
这个问题刚好有思考整理过，今天刚好复习一下。 原文链接：https://xiangshuo.blog.csdn.net/article/details/52749993
回答前的唠叨：
- 在现在的实际工作当中我已经很少用浮动来布局了，真的很少，刚开始学习的时候用的还蛮多，现在Flex布局，标准文档流以及 定位 已经可以满足大部分的布局需求了。
- 浮动带来的问题是盒子塌陷问题，所以我们就来解决这个问题吧
什么是盒子塌陷？ 外部盒子本应该包裹住内部的浮动盒子，结果却没有。
问题出现的原因 父元素只包含浮动元素，那么它的高度就会塌缩为零（前提就是你们没有设置高度（height）属性，或者设置了为auto，就会出现这种情况，如果父元素不包含任何的可见背景，这个问题会很难被注意到。 因为子元素设置了float属性，而float属性会把元素从标准文档流中抽离，直接结果就是外部盒子丢了两个孩子，因为内部没有其它盒子了，所以外部盒子只包裹文本节点内容，却把两个内部盒子扔在外面了。
解决方案
- 上面分析了问题出现的原因，不难找到第一种解决方案（既然孩子丢了，那就去找呗）——给外部盒子也添加浮动
把外部盒子也从标准文档流中抽离，让它和孩子们见面。 缺点：可读性差，不易于维护（别人很难理解为什么要给父元素也添上float），而且可能需要调整整个页面布局。
- 在外部盒子内最下方添上带clear属性的空盒子
可以是div也可以是其它块级元素，把 <div style="clear:both;"></div>放在盒内底部，用最下面的空盒子清除浮动，把盒子重新撑起来。
缺点：引入了冗余元素
-
用overflow:hidden清除浮动 给外部盒子添上这个属性就好了，非常简单。 缺点：有可能造成溢出元素不可见，影响展示效果。
-
用after伪元素清除浮动 给外部盒子的after伪元素设置clear属性，再隐藏它 这其实是对空盒子方案的改进，一种纯CSS的解决方案，不用引入冗余元素。
.clearfix {*zoom: 1;}
.clearfix:before,.clearfix:after {display: table;line-height: 0;content: "";}
.clearfix:after {clear: both;}
这也是bootstrap框架采用的清除浮动的方法。
题外话
其实还有一种最直接的办法：给每个盒子规定width和height，要多大给多大即可。但这并不算什么解决方案，因为这样的布局不是内容自适应的，但如果页面内容极少发生变动，这也是一个不错的方案，因为它的兼容性是毋庸置疑的。
1.通过设置父标签overflow: auto 2.通过after伪类: {display: block; content: ''; clear: both;}
父元素设置overflow:hidden
.clearfix::after{
content:'';
display:block;
height:0;
line-height:0;
clear:both;
}
-
外层父元素使用
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 的元素
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
设置overflow的方法其实本质上是为父元素设置了BFC，同一思路下可以有很多的解决方案：
- 根元素
- 浮动元素
- 绝对定位元素
- overflow不为visible的元素
- display为flow-root的元素
- contain值为layout、content或paint的元素 ……
清除浮动有如下思路去解决：
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即可。
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; }
- 把height定死（对于高度不固定的情况不行）
- overflow：hidden（有时候会导致内容被截断）
- 给外部元素也加上float（会使外部的元素脱离文档流，导致变形）
- :after{content: ''; font-size: 0; height: 0; display: block; clear: both;} （基本没有缺点）
清除浮动的方式 （1）使用clear属性清除浮动。 （2）使用BFC块级格式化上下文来清除浮动。 因为BFC元素不会影响外部元素的特点，所以BFC元素也可以用来清除浮动的影响，因为如果不清除，子元素浮动则父元素高度塌陷，必然会影响后面元素布局和定位，这显然有违BFC元素的子元素不会影响外部元素的设定。
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
- 设置本来元素的宽高
- 设置overflow：hidden
- 设置多余的元素div，设置其样式为clear：both
- 利用伪元素实现设置为不可见，而且清除浮动
1.额外标签法：在最后一个浮动标签后，新加一个标签，给其设置clear:both 优点：通俗易懂 缺点：添加无意义标签，语义化差 2.父级添加overflow:hidden 优点：代码简洁 缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素 3.使用伪元素before和after清除浮动 优点：符合闭合浮动思想，结构语义化正确，代码更简洁 缺点：ie6-7不支持伪元素
方法一：额外标签法
给谁清除浮动，就在其后额外添加一个空白标签 ，给其设置clear：both。
优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签，结构化比较差。
clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来 。
方法二：父元素添加overflow:hidden
通过触发BFC方式，实现清除浮动
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。
方法三：使用after伪元素清除浮动
优点：符合闭合浮动思想，结构语义化正确。
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。
方法四：使用before和after双伪元素清除浮动
优点：代码更简洁
缺点：用zoom:1触发hasLayout.
方法五：为父元素设置高度
缺点: 需要手动添加高度，如何后面的高度发生变化，还要再次修改高度，给后期的维护带来麻烦。
优点: 简单粗暴直接有效，清除了浮动带来的影响
