5,006
社区成员
发帖
与我相关
我的任务
分享
<div style="width:200px; background-color:silver;">
<div style="float:left; height:50px; background-color:red;">float</div>
<div style="zoom:1; clear:both;"></div>
</div>
<div style="width:200px;background-color:green;">normal div</div>
银色背景的div里面有一个浮动的子元素,浮动子元素下面紧接着是一个清除浮动的空 div。你想问 zoom:1 是干什么用的?…………一会儿你就知道了。<div style="width:200px; background-color:silver;">
<div style="float:left; height:50px; background-color:red;">float</div>
<div style="clear:both;"></div>
</div>
<div style="width:200px;background-color:green;">normal div</div>
各浏览器表现一致:<style type="text/css">
div div {
background-color: red;
}
</style>
<div id="Container" style="border:1px solid blue; width:400px;">
div[font-size:30px;] hasLayout == false
<div id="DIV1" style=" font-size:30px;"></div>
div[font-size:30px;] hasLayout == true
<div id="DIV2" style=" font-size:30px; zoom:1;"></div>
div[font-size:15px;] hasLayout == true
<div id="DIV3" style=" font-size:15px; zoom:1;"></div>
div[font-size:0px;] hasLayout == true
<div id="DIV4" style="font-size:0; zoom:1;"></div>
<br/>
</div>
截图:<div style="zoom:1; background-color:red;">
<div></div>
</div>
或者:<div style="zoom:1; background-color:red;">
<!-- -->
</div>