2020-02-28

浮动样式 float

float：left 左浮动
right 右浮动
设置了浮动样式的元素不再遵守普通流规则，因此两个浮动元素可以同行显示。当父元素宽度不足以放下所有的浮动元素时，那么超出父元素边界的元素会自动换行显示
浮动不会覆盖彼此
行内元素浮动
设置了浮动的行内元素的顶部不会超出所在行内的行框顶部，一个浮动元素后面的行内元素会首先按照文本环绕效果进行排列
父元素高度塌陷
1- 给父元素设置下列属性之一即可
overflow：hidden;
display：inline-block;
float：left;
position：absolute;
2- 利用一个幽灵元素来清楚浮动，手动撑开父元素的高度
①新建一个空的块元素，并给他设置clear：both属性【缺陷：破坏页面的文档结构】
②使用伪元素生成一个幽灵元素，并给他设置clear：both属性

clear 样式
clear： 清除浮动（元素盒子的边不能和前面的盒子相邻）
left; 左侧抵抗浮动
rigth; 右侧抵抗浮动
both; 两边都抵抗浮动（上面两个合并）