为什么要清除浮动?

(最开始跟着尚硅谷学了一遍, 懂了, 后来忙着学后端就前端就没咋看了, 回过头来再学的前端的时候这里又忘了, 做个笔记记录一下吧!)

在最初, 浮动是用来实现文字环绕图片效果的.

类比普通的文档流(盒子挨着背景板): 

类比脱离文档流(盒子2浮在上空): 

浮动后的元素会脱离文档流, 这会带来一些不好的影响:

1. 后面的兄弟元素, 会占据浮动元素之前所在的位置, 也就是会跑到浮动元素的后面去(对前面的兄弟元素无影响).

 2. 浮动的元素无法撑起父元素的高度, 导致父元素高度塌陷(父元素的宽度依然舒服着浮动的元素).

为解决这些问题, 需要清除浮动.

以下为解决方案(布局中的一个原则, 设置浮动的时候, 兄弟元素要么全都浮动, 要么全都不浮动, 以下方案均无法解决中间插入不浮动元素带来的问题):

1. 给父元素指定高度.
2. 给父元素也设置浮动，带来其他影响.
3. 给父元素设置 overflow: hidden.
4. 在所有浮动元素的最后面, 添加一个块级元素, 并给该块级元素设置 clear: both.
5. 给浮动元素的父元素, 设置伪元素, 通过伪元素清除浮动, 原理与方案四相同. (推荐写法)