1. float特性
浮动会破坏父元素高度,导致父元素的高度塌陷。在使用中应当适度使用。
2. 解决方法
在使用了float属性的元素后增加空div,给空div clear:both的属性。防止后面的元素向上浮动。
<div style="height : 0px; clear : both "> </div>
利用CSS伪类,在其后追加clear:both的元素
.clearfix:after{ content:"."; overflow:hidden; display:block; height:0; clear:both; }
IE6/IE7:
.clearfix:after{ *zoom:1; }
- BFC/haslayout
haslayout可能在IE6/IE7上呈现出混乱的布局。
通常声明:
- float:left/right
- position:absolute
- overflow:hidden/scroll(IE7+)
使用时会触发浏览器的滚动条 - display:inline-block/table-cell(IE8+)
*zoom:1(IE6/IE7)
3. 自适应布局
单侧固定
width+float
padding-left/margin-left自适应尺寸
float
display:table-cell(IE8+)
display:inline-block(IE7)