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.