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

问题描述

经过几行后，css float属性有一个奇怪的行为，我不知道其原因。

请考虑到我无法在行之间添加具有“ clear”属性的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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-float html