Question

为什么不与班级＆＃34;项目＆＃34;围绕它的＆＃34;项目＆＃34; s？将clear: both应用于孩子并不会有帮助。该部分也没有包含＆＃34; item＆＃34; s。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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，一个元素（或伪元素）后面的项目。通常的做法是给父元素提供类＆＃34; clearfix＆＃34;。这是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

或者试试吧 .items {溢出：隐藏}

CSS float容器不会包裹它的子节点，清除子节点不起作用

3 个答案: