Las ventajas y desventajas del diseño flotante, ¿cuáles son las formas de borrar flotante?

¿Qué es un diseño flotante?

Cuando un elemento flota, puede moverse hacia la izquierda o hacia la derecha hasta que su borde exterior toque el marco que lo contiene o el borde de otro elemento flotante.

Una vez que el elemento flota, se apartará del flujo normal del documento, por lo que el marco en el flujo normal del documento aparecerá como si el elemento flotante no existiera.

Ventajas del diseño flotante:

La ventaja de esto es que el texto se puede envolver bien alrededor de la imagen cuando la imagen está mezclada. Además, cuando el elemento flota, tiene algunas propiedades de los elementos a nivel de bloque, como el ancho y la altura, pero sigue siendo diferente del bloque en línea. El primero trata sobre la clasificación horizontal, el flotador puede establecer la dirección y la línea La dirección de -block es fija; hay otro problema de que el bloque en línea a veces tiene un espacio en blanco cuando está en uso

Desventajas del diseño flotante:

La desventaja más obvia es que una vez que el elemento flotante abandona el flujo del documento, no puede admitir el elemento principal, lo que hará que la altura del elemento principal se contraiga.

Manera de limpiar el flotador

1. Agregue etiquetas adicionales

<div class="parent">
    //添加额外标签并且添加clear属性
    <div style="clear:both"></div>
    //也可以加一个br标签
</div>

2. Agregue el atributo de desbordamiento al padre o establezca la altura

<div class="parent" style="overflow:hidden">//auto 也可以
    //将父元素的overflow设置为hidden
    <div class="f"></div>
</div>

3. Cree un selector de pseudo-tipo para borrar flotantes (recomendado)

//在css中添加:after伪元素
.parent:after{
    /* 设置添加子元素的内容是空 */
      content: '';  
      /* 设置添加子元素为块级元素 */
      display: block;
      /* 设置添加的子元素的高度0 */
      height: 0;
      /* 设置添加子元素看不见 */
      visibility: hidden;
      /* 设置clear：both */
      clear: both;
}
<div class="parent">
    <div class="f"></div>
</div>