float:left，控制当前元素在其父元素中的浮动位置，元素设置float后，水平布局的7元素等式将不再强制生效，即不再填充右margin边距- 而且设置浮动后，该元素将脱离文档流，不在占用文档的位置，周围在文档流上的元素将填充上去
- 浮动元素在父元素内部浮动时，不会覆盖其前面的其他浮动元素，可以多div横向布局，一行中不能容纳所有浮动元素时，自动换行
- 浮动元素前面有其他非浮动元素时，后面的浮动元素无法浮动到其上方，即浮动只能左右，不能上下
- 浮动元素不会覆盖文字，文字会自动在浮动元素周围，环绕布局。浮动布局的初衷就是为了文字环绕图片
- 脱离文档流的块元素和行内元素span、a，都转换为块元素的属性，可以设置宽高
- 高度塌陷，外层元素没有固定宽高，靠内层元素撑起来，当内层设置浮动后，由于脱离文档流，则外层塌陷
-
bfc，block formatting content 块级格式化环境。开启后，元素变为独立布局区域
-
开启bfc，父元素可以包裹着浮动的子元素，而不会造成没有宽高的父元素塌陷，开启方式有多种，下面的最好用
overflow: hidden,hidden 或 auto，此方式也有副作用
-
clear left、right，清除左边浮动元素、右边浮动元素对本元素的影响。其实是浏览器自动给该元素增加了margin-top属性，以免与上移后被浮动元素覆盖
-
完美解决方案，当子元素浮动，导致没有宽高的父元素塌陷时，可以在浮动元素后，在加一个div并设置clear，让这个div不受浮动元素影响，而在其默认的位置，即浮动元素下方，以此来撑开父元素
- div，真元素
- ::after，为元素，更适合
-
- 高度塌陷+边框重叠，解决方案
