CSS 浮动元素跳到下一行

Posted 2023-03-04

【中文标题】CSS 浮动元素跳到下一行

【英文标题】：CSS floating element break to next line

【发布时间】：2016-12-22 07:26:09

【问题描述】：

我的情况是这样的：

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 个 div 之间尝试了 br 标签。没有用。

【参考方案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 以删除由于 clearfix div 引起的空格。 `` ``