浮动的影响及清除浮动

1. 浮动的影响

一般情况，我们的父元素是不设置高度的，让其被内容自动撑开，如果子元素设置浮动了，

子元素会脱离文档流，就不能再撑开父元素的高度，从而导致父元素的高度丢失，导致页面布局的混乱

这就是高度塌陷问题，这个问题也必须要解决

2. 解决方案

1. 给父元素设置固定高度,但不推荐使用

2. 给元素开启BFC

1）、设置元素浮动

虽然可以解决高度塌陷，但宽度丢失，而且页面布局混乱的问题也没有解决

（2）、将元素转成行内块元素

也可以解决高度塌陷，但宽度丢失，而且会带来三像素问题，也一定程度上影响页面的布局

（3）、利用overflow样式，非visible默认值 可以是auto、hidden、scroll

可以解决高度塌陷问题，最大程度不影响页面的布局，副作用相对较小，建议使用

（4）、设置绝对定位

虽然可以解决高度塌陷，但宽度丢失，而且页面布局混乱的问题也没有解决

3. 添加div

可以直接在高度塌陷的父元素的最后，添加一个块元素（div），

由于这个div并没有浮动，所以他是可以撑开父元素的高度的，

然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，

基本没有副作用

4. 添加伪类

可以通过after伪类向父元素的最后添加一个空白的块元素，然后对其清除浮动，

这样做和添加一个div的原理一样，可以达到一个相同的效果，

而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用