Очистить встроенный блок

Question

Как очистить встроенный блок?

Вот мой HTML:

<p>Text 1</p> 
<p>Text 2</p> 
<p class="third">Text 3</p> 
<p>Text 4</p> 

Мой CSS делает каждый р тег инлайн-блок, который используется для компоновки, укладки, поля и целей заполнения.

Для гибкой компоновки мне теперь нужен текст 3, чтобы перейти к следующей строке, а для текста 4 - пойти с ним. Поэтому, прежде чем я имел это:

Текст 1 Текст 2 Текст 3 Текст 4

Но теперь мне это нужно:

Текст 1 Текст 2

Текст 3 Текст 4

UPDATE - есть ли solutin, что doenst добавляет дополнительную разметку HTML?

Answer 1

Использование float: left; вместо display: inline-block; то вы бы легко очистить .third

demo

Answer 2

Вы можете использовать:

<p>Text 1</p> 
<p>Text 2</p> 
<div class="clear"></div> 
<p>Text 3</p> 
<p>Text 4</p> 

В CSS:

.clear{ 
    clear: both; 
} 

Answer 3

Вы можете использовать этот CSS.

p{ 
    float:left; 
    margin-right:3% /*For spacing on between paragraph*/ 
} 
.third{ 
    clear:left; 
} 

Answer 4

другой подход, без неразберихи в HTML:

@media screen and (min-width: 0px) { 
    p { 
    float: left; 
    width: 50%; 
    } 
    p:nth-child(even) { 
    clear: right; 
    } 
} 

@media screen and (min-width: 400px) { 
    p { 
    float: none; 
    width: auto; 
    } 
} 

Пример: http://jsbin.com/ALAYAlo/1/edit (размер выходное окно)

Скриншот: http://i.imgur.com/CFNyrom.png