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

18

Меня всегда путают 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;
}
    
задан Joe.wang 18.04.2013 в 12:07
источник
  • Вы также должны наметить код вашего тестового примера в вопросе - включить основные биты из скрипки (без размеров и границ и т. д.). –  millimoose 18.04.2013 в 12:19

2 ответа

30

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

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

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

    
ответ дан BoltClock 18.04.2013 в 12:11
  • @ Jon: Спасибо, это была фраза, которую я искал, добавила. –  BoltClock♦ 18.04.2013 в 12:12
  • Спасибо за ваше редактирование и помощь, вы отвечаете очень ясно и полезно. Мне это нравится . Теперь мое понимание этого лучше. –  Joe.wang 18.04.2013 в 16:14
0

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

.clr:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
    
ответ дан Andrew 18.04.2013 в 12:13