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