Css 为什么最后一行会从包装纸上掉下来？

我的小提琴在这里：

我的主要问题是这个代码：

CSS:

HTML:

出于某种原因，最后三个带有类picBottomButtons的div显示在包装器之外。

---

我是CSS3的不速之客，有人能解释一下为什么底线不在包装中吗？

这是因为你对那些底部按钮使用了浮动，但没有其他浮动。基本上你有不同的游戏规则。删除float并添加display:inline块，您应该很好。您可能还需要调整宽度

更新小提琴

---

我会使用display:inline块，而不是浮动图像。如上所述，浮动从DOM中删除元素。它并没有完全按照所说的那样定位它们，但它确实将它们从流中带出

我已将您的JS Fiddle更新为以下内容：

CSS:

我改变了图片的宽度，这样当我把它们放在一起时，它们都是水平的。我还将float:left更改为display:inline块

示例如下：

这是因为浮动的.picBottomButtons元素，只需使用：

您还可以添加溢出：自动；到.picWrapper，更多信息如何

---

因为你让元素浮动了。浮动意味着绝对定位，意味着元素从正常DOM流中移除。要么使用内联显示属性，要么使用谷歌clearfix。就像我说的，我是一个noob。。。你能解释清楚一点吗浮标需要一个清晰的标记。也查一下clearfix。了解浮动。使用一个值，不是250而是250像素，查找基本的css、术语、用法等。这更多的是一个注释，而不是一个答案。或者一个具体的解决方案。我否决了你，因为这是一个低质量的答案，其他有类似问题的人不太可能从中获益。请参阅我将原始问题标记为重复的线程，以获得一个好答案的示例。别把它当私事，谢谢你们！我会投票支持，但由于这是我在页面上使用的解决方案，我会选择这个。谢谢你的链接！再次感谢您提供的链接：

 .picWrapper {
     width:250px;
     border: 1px solid black;
 }
 .picThumb {
     width:250;
     height:250;
     margin:auto;
     padding-bottom:10PX;
     text-align: center;
 }
 .picRating {
     width:250;
     height:90;
     text-align: center;
     padding-bottom:10px;
 }
 .picFilename {
     width:230;
     height:90;
     margin: auto;
     text-align: center;
     padding-bottom:5px;
 }
 .picBottomButtons {
     width:83px;
     float:left;
     text-align: center;
 }

<div class="picWrapper">
    <div class="picThumb">
        <img src="http://placehold.it/250x250" />
    </div>
    <div class="picRating">Rate this picture: 1 2 3 4 5 6 7</div>
    <div class="picFilename">abcd.jpg</div>
    <div class="picBottomButtons">1</div>
    <div class="picBottomButtons">2</div>
    <div class="picBottomButtons">3</div>
</div>

.picBottomButtons{
    width:50px;
    display: inline-block;
    text-align: center;
}

.picWrapper:before, 
.picWrapper:after {
    content: " ";
    display: table;
}
.picWrapper:after {
    clear: both;
}