(最开始跟着尚硅谷学了一遍, 懂了, 后来忙着学后端就前端就没咋看了, 回过头来再学的前端的时候这里又忘了, 做个笔记记录一下吧!)
在最初, 浮动是用来实现文字环绕图片效果的.
类比普通的文档流(盒子挨着背景板):
类比脱离文档流(盒子2浮在上空):
浮动后的元素会脱离文档流, 这会带来一些不好的影响:
1. 后面的兄弟元素, 会占据浮动元素之前所在的位置, 也就是会跑到浮动元素的后面去(对前面的兄弟元素无影响).
2. 浮动的元素无法撑起父元素的高度, 导致父元素高度塌陷(父元素的宽度依然舒服着浮动的元素).
为解决这些问题, 需要清除浮动.
以下为解决方案(布局中的一个原则, 设置浮动的时候, 兄弟元素要么全都浮动, 要么全都不浮动, 以下方案均无法解决中间插入不浮动元素带来的问题):
- 给父元素指定高度.
- 给父元素也设置浮动,带来其他影响.
- 给父元素设置 overflow: hidden.
- 在所有浮动元素的最后面, 添加一个块级元素, 并给该块级元素设置 clear: both.
- 给浮动元素的父元素, 设置伪元素, 通过伪元素清除浮动, 原理与方案四相同. (推荐写法)