[CSS] CSS claro flotante varios métodos-Clear flotante

Flotante claro

Hay varias formas de borrar CSS flotante: Borrar
enlace flotante de GitHub (experiencia descargable): https://github.com/hcq29/Clear-floating

¿Cómo flotan los elementos?

1. El elemento está flotando en dirección horizontal. En este momento, el elemento solo puede moverse hacia la izquierda y hacia la derecha, pero no hacia arriba y hacia abajo.
2. Un elemento flotante intentará moverse hacia la izquierda o hacia la derecha hasta que su borde exterior toque el borde del cuadro contenedor u otro cuadro flotante.
3. Los elementos posteriores al elemento flotante lo rodearán.
4. Los elementos anteriores al elemento flotante no se verán afectados.
5. Si la imagen está flotando a la derecha, la siguiente secuencia de texto la rodeará a la izquierda:

El Flotador de CSS moverá el elemento hacia la izquierda o hacia la derecha, y los elementos circundantes también se reorganizarán.

Escenarios de aplicaciones flotantes

1. Cuando se aplica a imágenes, el propósito inicial de flotar era envolver el texto, permitiendo que el texto se envuelva alrededor de la imagen.
2. La lista está organizada horizontalmente.
3. Logre un diseño de dos columnas y un diseño de tres columnas

Maneras de limpiar flotadores

Método 1: Insertar en la parte inferior: claro: ambos;

Agregue un elemento después del último elemento flotante, establezca clear: both; para ello, en este momento, el elemento principal detectará el elemento más alto en el elemento secundario y luego usará el elemento más alto como la altura del elemento principal.

<div class="fahter">
    <div class="big">big</div>
    <div class="small">small</div>
    <div class="clear">额外元素法</div>
</div>

.fahter {
    
    
	width: 400px;
	border: 1px solid deeppink;
}

.big {
    
    
	width: 200px;
	height: 200px;
	background: darkorange;
	float: left;
}

.small {
    
    
	width: 120px;
	height: 120px;
	background: darkmagenta;
	float: left;
}

.footer {
    
    
	width: 900px;
	height: 100px;
	background: darkslateblue;
}

.clear {
    
    
	clear: both;
}

Método 2: agregar overflow: auto; al elemento principal

El valor de desbordamiento puede ser automático u oculto, y BFC se activará en este momento.

<div class="fahter">
	<div class="big">big</div>
	<div class="small">small</div>
</div>
<div class="footer"></div>

Agregue overflow: auto al elemento principal,

.fahter {
    
    
    width: 400px;
    border: 1px solid deeppink;

    overflow: hidden;   /* 触发BFC */
}

.big {
    
    
    width: 200px;
    height: 200px;
    background: darkorange;
    float: left;
}

.small {
    
    
    width: 120px;
    height: 120px;
    background: darkmagenta;
    float: left;
}
.footer {
    
    
	width: 900px;
	height: 100px;
	background: darkslateblue;
}

Método 3: pseudoelemento

<div class="fahter clearfix">
	<div class="big">big</div>
	<div class="small">small</div>
</div>
<div class="footer"></div>

.fahter {
    
    
	width: 400px;
	border: 1px solid deeppink;
}

.clearfix:after{
    
    
	content:"";/*设置内容为空*/
	height:0;/*高度为0*/
    line-height:0;/*行高为0*/
	display:block;/*将文本转为块级元素*/
	visibility:hidden;/*将元素隐藏visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。*/
	clear:both;/*清除浮动*/
}
.clearfix{
    
    
	*zoom:1;/*为了兼容IE ,ie6清除浮动的方式 *号只有IE6-IE7执行*/
}
.big {
    
    
	width: 200px;
	height: 200px;
	background: darkorange;
	float: left;
}

.small {
    
    
	width: 120px;
	height: 120px;
	background: darkmagenta;
	float: left;
}

.footer {
    
    
	width: 900px;
	height: 100px;
	background: darkslateblue;
}

Método 4: pseudoelementos dobles

.clearfix:before,.clearfix:after {
    
    
     content: "";
     display: block;
     clear: both;
}
.clearfix {
    
    
     *zoom: 1;
 }

Al ver esto, no olvides servirte un vaso de agua tibia ~