为什么css margin-bottom不影响其他方框？

Question

它只影响第一张照片。

HTML：

 <div class="srow">
   <div class="sdw" style="float:left;margin-left:5px;">
     <img style="height:150px; border-radius:5px;" src="img/placeholder.png"> <br>
     <div style="margin-top:-157px">Item title...</div> <br>
     <div style="margin-top:94px;">Price</div>
   </div>
   <div class="sdw" style="float:right;margin-right:5px;">
     <img style="height:150px; border-radius:5px;" src="img/placeholder.png"> <br>
     <div style="margin-top:-157px">Item title...</div> <br>
     <div style="margin-top:94px;">Price</div>
   </div>

的CSS：

.srow{
   margin-bottom: 160px;
 } 
.sdw{
  height:150px;width:150px;
}

Answer 1

div的内容全部展开。 div没有高度，下一个元素可以在下一个适合的地方找到。

您可能希望在clear: both的末尾添加div的内容。

或者避免使用float。

Answer 2

首先，让我们在自己的例子中将CSS与HTML分开：

#wrap {
    width: 440px;
    margin: 0 auto;
}
.image {
    float: left;
    margin: 10px;
    position: relative;
}
.image h1 {
    position: absolute;
    top: 0;
    text-align: center;
    width: 200px;
}
.image h2 {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 200px;
}

现在，让我们写一些HTML：

<div class="image">
    <img src="http://www.placehold.it/200" />
     <h1>Title</h1>
     <h2>Price</h2>
</div>

我们将制作四个盒子并将它们包装在一起：

<div id="wrap">
    <div class="image">
        <img src="http://www.placehold.it/200" />
         <h1>Title</h1>    
         <h2>Price</h2>    
    </div>
    <div class="image">
        <img src="http://www.placehold.it/200" />
         <h1>Title</h1>    
         <h2>Price</h2>    
    </div>
    <div class="image">
        <img src="http://www.placehold.it/200" />
         <h1>Title</h1>    
         <h2>Price</h2>    
    </div>
    <div class="image">
        <img src="http://www.placehold.it/200" />
         <h1>Title</h1>    
         <h2>Price</h2>    
    </div>
</div>

Here is a fiddle of this example!