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-й дивизоры были в новой строке. Как это сделать. Я пробовал тег br между 3-м и 4-м div .. не работал.

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>