为什么在第三行之后 float 属性不能正常工作？

Question

在一些行之后 css 浮动属性有一个奇怪的行为，我不知道它的原因。

请注意，我无法在行之间添加带有“清晰”属性的 div，因为 html 将动态生成（php 循环） .

我认为，为了做到这一点，我应该在 php 中创建一个函数来确定何时在行之间插入清晰的 div，因为有时每行有 2 张图像，而其他时候有 3 张.

但我更喜欢 CSS 解决方案。

完整代码如下：

.row {
    width: 600px;
    text-align: center;
    margin: 0 auto;
}

.boxes{
    box-sizing: border-box;
    position: relative;
    min-height: 1px;
    height: auto;
    float: left;
    padding-left: 10px;
    padding-bottom: 10px;   
}

.box1 {
    width: 33.33333333333333%;
}

.box2 {
    width: 66.66666666666666%;
}

.box-inner {
    background-color: grey;
    width: 100%;
    height: 100%;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

<html>

  <body>
    <div class="row">
      <div class="box1 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
        </div>
      </div>
      <div class="box1 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
        </div>
      </div>
      <div class="box1 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
        </div>
      </div>
      <div class="box1 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
        </div>
      </div>
      <div class="box2 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
        </div>
      </div>
      <div class="box2 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
        </div>
      </div>
      <div class="box1 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
        </div>
      </div>
      <div class="box1 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
        </div>
      </div>
      <div class="box1 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
        </div>
      </div>
      <div class="box1 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
        </div>
      </div>
    </div>
  </body>

</html>

Answer 1

在您的示例中，您的图像比之前的图像略短。这导致了 clear 通常会修复的下一行的空白。如果每行的元素数量相同，那么 nth-child 之类的东西可以与 clear 一起使用，但是既然你说每行的元素数量可以改变，那是行不通的。一个简单的解决方法是在 .box-inner class:

上设置最小高度

.row {
  width: 600px;
  text-align: center;
  margin: 0 auto;
}

.boxes {
  box-sizing: border-box;
  position: relative;
  min-height: 1px;
  height: auto;
  float: left;
  padding-left: 10px;
  padding-bottom: 10px;
}

.box1 {
  width: 33.33333333333333%;
}

.box2 {
  width: 66.66666666666666%;
}

.box-inner {
  background-color: grey;
  width: 100%;
  height: 100%;
  min-height: 122px;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

<div class="row">
  <div class="box1 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
    </div>
  </div>
  <div class="box1 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
    </div>
  </div>
  <div class="box1 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
    </div>
  </div>
  <div class="box1 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
    </div>
  </div>
  <div class="box2 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
    </div>
  </div>
  <div class="box2 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
    </div>
  </div>
  <div class="box1 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
    </div>
  </div>
  <div class="box1 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
    </div>
  </div>
  <div class="box1 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
    </div>
  </div>
  <div class="box1 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
    </div>
  </div>
</div>

Answer 2

最简单的解决方案是为容器添加固定高度。

.box-inner {
    background-color: grey;
    width: 100%;
    height: 120px;
    overflow: hidden;
}

对上述内容的另一个补充是添加 object-fit: cover 到您的图像以确保它填满容器 space。

.box-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

为什么在第三行之后 float 属性不能正常工作？

Why after the third row the float property does not work correctly?

html

css

css-float

为什么在第三行之后 float 属性 不能正常工作？

Why after the third row the float property does not work correctly?

html

css

css-float

为什么在第三行之后 float 属性不能正常工作？