Html CSS浮动容器不'；不要绕着它'；s children，清除children不会'；行不通

为什么带有类“items”的div不环绕其“item”呢？将

清除：两个
应用到孩子身上都没有帮助。本节也没有围绕“项目”展开


.items{
背景：#ff0；
宽度：1000px；
显示：块；
}
.项目1，
.项目2，
.项目3{
宽度：290px；
高度：350px；
浮动：左；
左边距：23px；
边缘顶部：80px；
背景色：#CBCB；
}

Php测试
Jquery测试
另一个
当项目浮动时，它会从文档的正常“流”中取出，因此容器会忽略它的存在，而不会环绕它。有几种“浮动清理”解决方案可使容器包裹浮动项目。这是旧标准：

HTML

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

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

您需要的是一个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 */
}

或者试试看
.items{overflow:hidden}
我应该将其添加到所有内部浮动项目的容器中吗？是的，没错。将其添加到
。items
将使其（和部分）扩展。井溢出：隐藏强制包含元素拉伸以包含其浮动子元素，只要它具有自动宽度和高度。顺便说一句，此项也适用于旧Borwser，如ie7等
.items:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: collapse;
}

.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 */
}