使用clear清除浮动对外边距的影响

使用clear后，浮动元素的下外边距能起作用，但是使用clear的这个元素的上外边距失效了，不起作用。这是怎么回事啊

宝慕林3319090 2017-08-13

收起

3回答

小丸子爱吃菜回答被采纳获得+3积分 2017-08-14 13:42:16

clear元素设置了margin-top，由于它和它的父元素（这里就是body）之间并没有间隙（例如border、padding），会发生垂直外边距合并。因此，此时margin-top相当于作用在了body上，所以浮动元素left的初始排版位置就会改变到那个地方。你可以试试为body增加padding-top: 1px;，这时候就有了间隙，也就不会发生合并。

收起回答

宝慕林3319090 提问者 #1

那为什么给clear元素清除浮动后，外边距就没合并了啊。

2017-08-14 22:06:57
宝慕林3319090 提问者 #2

非常感谢！

2017-09-06 22:21:54

提问者宝慕林3319090 2017-08-14 10:07:56

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 *{
  margin: 0;
  padding: 0;
 }
  .left{
   width: 100px;
   height: 100px;
   background: red;
   float: left; 
    }  
   .clear{
   width: 200px;
   height: 200px;
   background: blue;
   margin-top: 100px;
  
  }
 </style>
</head>
<body>
 <div class="left"></div>
 <div class="clear"></div>
</body>
</html>

这里浮动的div为什么也跟着下面的div下移啊，下面的div用clear后浮动元素就跑上去了。

收起回答

小丸子爱吃菜 2017-08-14 09:35:57

可以将你有问题的代码粘贴上来，方便我们更好的帮你找到问题~

祝学习愉快！

收起回答

提问者宝慕林3319090 #1

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .left{ width: 100px; height: 100px; background: red; float: left; } .clear{ width: 200px; height: 200px; background: blue; margin-top: 100px; } </style> </head> <body> <div class="left"></div> <div class="clear"></div> </body> </html> 这里浮动的div为什么也跟着下面的div下移啊，下面的div用clear后浮动元素就跑上去了。

2017-08-14 10:08:35
snowman022 回复提问者宝慕林3319090 #2

第二个div加了clear后margin-top会被压缩，所以相当于margin-top:100px;没有了，因为你设置的是100px，正好是上面div的height，所以感觉是浮动元素跑上去了，如果设置margin-top:200px;浮动元素照样会跑上去，而且两个div间是没有间隙的。解决方法有两个：1.第二个div增加float:left属性（同时添加clear:left，这个别忘了） 2.两个div之间增加一层"<div style="clear:both;"></div>，把他们隔开。

2017-09-04 19:56:33