CSS 浮动元素换行到下一行

Question

我遇到了这样的情况：

HTML

<div class="outer clearfix">
    <div class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
    <div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
    <div class="three">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
    <div class="four">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
    <div class="four">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
</div>

CSS

.clearfix:after {
        content: '';
        display: block;
        clear: both;
    }
    .outer {
        background: #ccc;
    }
    .outer div {
        border-right: 1px solid red;
        float: left;
        padding: 10px;
        width: 100px;
    }

在这里，我希望第 4 和第 5 div 换行。我怎么做。我在第 3 次和第 4 次之间尝试了 br 标签 div.. 没有用。

Answer 1

像下面那样清除浮动，然后就可以了。注意 div:

  <div style="clear:both;"></div>

我已经添加到 html。

让我知道您的反馈。谢谢！

.clearfix:after {
  content: '';
  display: block;
  clear: both;
}
.outer {
  background: #ccc;
}
.outer div {
  border-right: 1px solid red;
  float: left;
  padding: 10px;
  width: 100px;
}
.outer .clear{
  clear:both; width: 0px; height: 0; padding: 0; margin: 0;
}

<div class="outer clearfix">
  <div class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
  <div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
  <div class="three">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
  <div class="clear" style="clear:both;"></div>
  <div class="four">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
  <div class="four">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
</div>

CSS 浮动元素换行到下一行

CSS floating element break to next line

html

css

list

css-float

clearfix