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

在這裏，我想要第四和第五個div在新的行中。 我該怎麼做。我嘗試了第三和第四個div之間的br標籤..沒有工作。

Answer 1

清除像下面這樣的浮球，你去了。注意div：

<div class="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>