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

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

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

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

Ответ 1

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

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

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

Ответ 2

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

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