标题:浮动及清除浮动
1.浮动
特性:
- 脱标
- 行内块元素特性
- 块级盒子没设置宽度时默认和父级一样宽、设置浮动后宽度根据内容决定
- 设置浮动的元素间无缝隙、一行占不下会另起一行
- 一行内顶端对齐排序
清除浮动:
- 额外标签发、空标签必须是块级元素
<div style="clear:both;"></div>
- 父级添加overflow属性
- 伪元素发
:after伪元素发
双伪元素清除浮动
:after其实已经达到了清除浮动的目的,:before的设置目的是为了阻止margin-top的合并
clear:both;//清除左右两边浮动
content:" ";//包含一个空格是为了解决Opear浏览器bug,
font-size:0;也可以解决;没有这个会导致清除浮动元素的顶部底部有空白
display:table;触发块级上下文(BFC),块级上下文不重叠,浮动也是BFC,设置clear:both;伪元素插入的内容会挤到上下两端
设置diaplay:table;后content中内容会被渲染成0*0空白元素,不会占用页面内容