CSS 浮点容器不会环绕它的子项，清除子项不起作用

Question

为什么带有类"items"的div不包裹它的"item"？对孩子们应用clear: both没有帮助。该部分也不环绕"item"。

.items {
background: #ff0;
width: 1000px;
display: block;
}
.item1,
.item2,
.item3 {
width: 290px;
height: 350px;
float: left;
margin-left: 23px;
margin-top: 80px;
background-color: #cbcbcb;
}

<section>
<div class="items">
<div class="item1">
<h3>Php testing</h3>
</div>
<div class="item2">
<h3>Jquery testing</h3>
</div>
<div class="item3">
<h3>Another one</h3>
</div>
</div>
</section>

Answer 1

当一个项目被浮动时，它会从文档的正常"流"中取出，因此容器会忽略它，而不会将其包裹起来。有几种"浮动清除"解决方案可以使容器包裹浮动的项目。这是旧的标准：

HTML

<section>
<div class="items">
<div class="item1">
<h3>Php testing</h3>
</div>
<div class="item2">
<h3>Jquery testing</h3>
</div>
<div class="item3">
<h3>Another one</h3>
</div>
<div class="clear">&nbsp;</div>
</div>
</section>

CSS

.clear {
clear: both;
height: 0;
visibility: none;
}

另一种选择是使用CSS:after伪元素，但这只适用于更现代的浏览器：

.items:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: collapse;
}

Answer 2

您想要的是一个clearfix，一个位于项之后的元素(或伪元素)。通常的做法是将类"clearfix"赋予父元素。下面是一个简单的CSS伪元素方法：

.clearfix::after {
content: ''; /* To create the pseudo-element */
display: table; /* This is the shortest way of making it work here */
clear: both; /* This actually pushes it below and expands the parent */
}

Answer 3

或者尝试一下.项｛溢出：隐藏｝