5,006
社区成员
发帖
与我相关
我的任务
分享
<div style="border:1px solid green; width:150px; float:left;">
<div id="Float" style="float:right; width:100px; height:100px; background-color: blue;">Float</div>
<div id="Clear" style="clear:right; float:left; width:100px; height:100px; background-color:red;filter:alpha(opacity=50);-moz-opacity:0.5; opacity: 0.5;">Clear</div>
</div>
上面代码中,为了更清楚的表现元素之间的关系,给 Clear 设置了 50% 的透明度。<div id="Container" style="width:300px; height:200px; border:1px solid red;">
<div id="DIV1" style="float:right; width:150px; height: 50px; background-color:blue;">1 float:right;</div>
<div id="DIV2" style="clear:right; float:right; width:250px; height: 50px; background-color:red;">2 clear:right;
float:right;
</div>
<div id="DIV3" style="float:left; width:100px; height: 50px; background-color:green;">3 float:left;</div>
</div>
按标准讲绿色的块的顶边,不能超过前面的红色块(它也是浮动元素)的顶边。