css - personalizar - Por qué claro: lo correcto no funciona como se esperaba

title div css

Question

Siempre estoy confundido por clear: left , clear: right y clear: both en CSS. Lo sé bien clear: both significan que no permite elementos flotantes en ambos lados de sí mismo.

Hice algunas pruebas here . Pensé que el diseño aparecería como abajo, porque B usa clear: both . Pero no lo hace. ¿Podría alguien decirme por qué?

UNA
segundo
discos compactos

Actualizado (Publicar el código)

<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

Puedes tener un claro que funcione después del div si usas:

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

Answer 2

clear en un elemento solo borra los flotadores anteriores en el orden del documento. No despeja flotadores después de eso. Los valores left y right significan el espacio libre de los flotadores izquierdos y derechos que preceden a un elemento respectivamente. No significan limpiar flotadores antes y después del elemento.

Dado que C se está flotando, pero no se aplica ningún espacio libre, flota al lado de B. B no intenta borrar C porque C viene detrás de él en la estructura del documento.

Además, clear: right no tiene ningún efecto en su caso de prueba porque, de todos modos, ninguno de sus elementos está flotando a la derecha.