Почему ясна: права не работают должным образом

Question

Я всегда смущен clear: left, clear: right и clear: both в CSS. Я знаю, что clear: both означает, что он не допускает плавающие элементы по обе стороны от себя.

Я проверил некоторые тесты here. Я думал, что макет будет выглядеть, как показано ниже, потому что B использует clear: both. Но это не так. Может ли кто-нибудь сказать мне, почему?

В
CD-

Обновленный (сообщение код)

<div class="container"> 
    <div class="A">a</div> 
    <div class="B">b</div> 
    <div class="C">c</div> 
    <div class="D">d</div> 
    <div class="CB"></div> 
</div> 

.container{ 
    width:100%; 
    border:1px solid red;  
} 
.B{ 
    float:left; 
    clear:both; 
    width:10%; 
    height:30px; 
    border:1px solid blue; 
} 
.A,.C,.D{ 
    float:left; 
    width:10%; 
    height:30px; 
    border:1px solid blue; 
} 
.CB{ 
    clear:both; 
} 

Answer 1

clear на элементе только очищает поплавки , прежде чем его в порядке документа. Он не очищает поплавки после it. Значения left и right означают зазор левых поплавков и правых поплавков , предшествующий элементу соответственно. Они не означают очистку поплавков до и после элемента.

Поскольку C плавает, но не имеет никакого зазора, он плавает рядом с B. B не пытается очистить C, потому что C появляется после него в структуре документа.

Кроме того, clear: right не имеет никакого эффекта в тестовом примере, потому что ни один из ваших элементов не плавает вправо в любом случае.

Answer 2

Вы можете иметь ясно, что работает после DIV, если вы используете:

.clr:after { 
visibility: hidden; 
display: block; 
content: ""; 
clear: both; 
height: 0; 
}