如何修复：2个带浮点的DIV无法正常工作

Question

我有一个主要的部门：面板主体和内部部门：包 我的包裹正确地显示在面板主体内部，并成行堆叠。

这是实时网站：https://royalkingdom.net/store/?cat=1

我曾尝试添加到我的包裹中：float:left;，但这样做的话，包裹不会刺入身体。

如果我删除float:left;可以，但是每行不是3

我的软件包css：

.package {
    width: 33.33333333%;
}

我的面板式CSS：

.panel {
    margin-bottom: 30px;
    background: url(https://castiamc.com/buycraft/bordersv2/Middle.png);
    width: 850px;
    border: none;
    border-radius: 0;
    position: relative;
    min-height: 300px;
    padding: 20px;
    color: #fff;
}
.panel-body {
    padding: 15px;
    text-align:justify;
}
.panel .panel-body {
    color: #3d3e3f;
    box-sizing: border-box;
    position: relative;
    max-width: 750px;
    top: -75px;
    left: 13px;
}

<div class="package">
<img src="'.(isset($image) && $image!="" && ($it == 1 || $it == 3 || $it == IMG_JPEG) ? $image : "img/404.jpg").'" class="img-rounded img-responsive" style="width:250px; height:168px;">
</div>

我希望在面板体内每行显示3个包装。

Answer 1

在包的父级上，添加一个名为clearfix的附加类，并在样式表中定义该类：

.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}

基本上，浮子将元素从父对象的自然流中移除，因此将其“强制”添加回其“正常”大小。