introducción
En el desarrollo front-end, a menudo nos encontramos con algunos problemas de estilo, uno de los cuales es el problema de diseño causado por pseudoelementos. Para solucionar este problema, podemos utilizar la tecnología de limpieza de pseudoetiquetas. Este blog presentará los conceptos, el uso y los códigos de muestra de la limpieza de pseudoetiquetas única y doble, y explicará sus principios en detalle.
1. Eliminación de pseudoetiqueta única
La eliminación de pseudoetiquetas únicas es una técnica para eliminar elementos flotantes mediante la aplicación de pseudoelementos en elementos HTML. Cuando un elemento flota, se sale del flujo normal del documento, lo que puede provocar que se colapse la altura del elemento principal. Al agregar un pseudoelemento al elemento principal, podemos forzar que el elemento principal contenga elementos flotantes y restaurar el diseño normal.
1.1 Uso
Agregue el siguiente código en el estilo del elemento principal:
.clearfix::after {
content: "";
display: table;
clear: both;
}
En el código anterior, definimos un pseudoelemento ::aftery lo configuramos contentcomo una cadena vacía. Podemos darle al pseudoelemento propiedades similares a las de una tabla estableciendo displayel atributo en y borrar el flotante a través del atributo.tableclear
1.2 Código de muestra
<div class="parent clearfix">
<div class="float-left"></div>
<div class="float-left"></div>
</div>
.clearfix::after {
content: "";
display: table;
clear: both;
}
.float-left {
float: left;
width: 50%;
height: 100px;
background-color: #f1f1f1;
}
En el código de ejemplo anterior, aplicamos .clearfixla clase al estilo del elemento principal y definimos un elemento principal que contiene dos elementos secundarios flotantes. Al utilizar la técnica de limpieza de pseudoetiqueta única, el elemento principal contendrá correctamente el elemento flotante, evitando problemas de colapso de altura.
2. Eliminación de doble pseudoetiqueta
La limpieza de pseudoetiquetas dobles es una técnica que borra los flotantes aplicando pseudoelementos tanto en los elementos principales como en los secundarios. En comparación con la limpieza de pseudoetiquetas únicas, la limpieza de pseudoetiquetas dobles puede resolver mejor los problemas de diseño en algunos casos extremos.
2.1 Uso
Agregue el siguiente código en los estilos de los elementos padre e hijo:
.clearfix::after,
.clearfix::before {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
2.2 Código de muestra
<div class="parent clearfix">
<div class="float-left"></div>
<div class="float-left"></div>
</div>
.clearfix::after,
.clearfix::before {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.float-left {
float: left;
width: 50%;
height: 100px;
background-color: #f1f1f1;
}
En el código de ejemplo anterior, aplicamos .clearfixla clase en los estilos del elemento principal y de los elementos secundarios, y definimos un elemento principal que contiene dos elementos secundarios flotantes. Al utilizar la técnica de limpieza de pseudoetiquetas dobles, podemos asegurarnos de que el elemento principal contenga correctamente el elemento flotante y resolver problemas de diseño.
en conclusión
La limpieza de pseudoetiquetas única y la limpieza de pseudoetiquetas dobles son técnicas comúnmente utilizadas en el desarrollo front-end para resolver problemas de diseño causados por elementos flotantes. Al aplicar un pseudoelemento a un elemento padre o a un elemento padre-hijo, podemos borrar el flotador y restaurar el diseño normal. Ya sea que se trate de una eliminación de pseudoetiqueta simple o de una pseudoetiqueta doble, puede optar por utilizarla según la situación específica. En el desarrollo real, podemos utilizar estas tecnologías de manera flexible según sea necesario para garantizar la corrección del diseño de la página.
Espero que este blog le ayude a comprender y aplicar la tecnología de eliminación de pseudoetiquetas simples y dobles.
Enlaces de referencia: