Добавление новой строки в css

Question

Я ищу простейший способ разбить коллекцию встроенных блокировок, не прибегая к дополнительной разметке (например, br).

Я начал наивно думать, что следующее будет делать трюк, за исключением того, что «четыре» заканчиваются на собственной линии, которые я действительно не понимаю.

.inline { 
 
    display:inline-block; 
 
} 
 

 
.newline { 
 
    display:block; 
 
}

<div class="inline">one</div> 
 
<div class="inline">two</div> 
 
<div class="inline newline">three</div> 
 
<div class="inline">four</div>

я попытался решения с использованием: после того, как /: прежде, чем найти здесь на Stackoverflow, но они работают только для меня, если мои элементы являются инлайн вместо инлайн-блока.

К сожалению, мне также необходимо поддерживать IE6!

Попытка с поплавками

В этом примере ниже, не отображается должным образом в IE 6

.inline { 
 
    float: left; 
 
    width: 50px; 
 
    height: 50px; 
 
    background: #F00; 
 
} 
 
.newline { 
 
    clear: left; 
 
}

<div class="inline">one</div> 
 
<div class="inline">two</div> 
 
<div class="inline newline">three</div> 
 
<div class="inline">four</div>

В результате в IE 6

Answer 1

Для IE6 и других старых браузерах необходимо добавить четкую линию, например, с помощью этого кода:

<div class="inline">one</div> 
<div class="inline">two</div> 
<div class="visualClear"></div> 
<div class="inline">three</div> 
<div class="inline">four</div> 


.inline { 
    float: left; 
    width: 50px; 
    height: 50px; 
    background: #F00; 
} 
.visualClear { 
    clear: both; 
    display: block; 
} 

Я знаю, что это не правда очень красиво, но это будет работать для вас.