css中clear与margin的相互作用

lear与margin的相互作用

1. clear与margin的重叠

请看如下代码：

1.<div style="background-color:#f5f5f5;">

    <imgsrc="http://img.mukewang.com/53d60af3000171a002560191.jpg"style="float:left;">

<div style="clear:both;margin-bottom:100px;">clear:both;</div>

</div>

<divstyle="margin-top:100px;">本文字离图片的距离是100px</div>

 

<br><br><br><br>

2.<divstyle="background-color: #f5f5f5; overflow: hidden;">

<imgsrc="http://img.mukewang.com/53d60af3000171a002560191.jpg"style="float:left; margin-bottom: 100px;">

</div>

<div style="margin-top:100px;">本文字离图片的距离是200px</div>

 

在上面代码中，第一段文字里图片的距离是100px；

              第二段文字里图片的距离是200px

分析：浮动会使父元素高度塌陷，第一个大的div里设置clear:both属性的元素（即使小div）的垂直方向上的margin会消失，与clear重叠了。   而第二个大div则margin正常显示。

 

 

2. clear使margin-top的失效

 请看如下代码：

<divstyle="float:left;">float:left</div>

<div style="clear:both;margin-top:100px;margin-left:100px;background:red;margin-right: 100px;">clear:both</div>

 

在这段代码中第二个div中的margin-top会失效。

 

在浮动元素后的第一个元素如果设置了clear：left（both也行），那么这个元素的margin-top将会失效