Establezca la altura para el elemento principal anterior. Nota: En el desarrollo empresarial, no escriba la altura si puede hacerlo.
<! DocType html> <html lang = en> <head> <meta charset = utf-8> <title> d131_clarfloat </title> <style> .smallbox1 {width: 100px; Altura: 100px; Color de fondo: rojo; Boder: 3px negro sólido; margen: 5px; float: right;} .smallbox2 {ancho: 100px; Altura: 100px; Color de fondo: rojo; Boder: 3px negro sólido; margen: 5px;} .smallbox3 {ancho: 100px; Color de fondo: rojo; Boder: 3px negro sólido; margen: 5px;} .smallbox3 {ancho: 100px; Altura: 100px; Color de fondo: rojo; Boder: 3px negro sólido; margen: 5px;} .smallbox4 {ancho: 100px; Altura: 100px; Color de fondo: rojo; Boder: 3px negro sólido; margen: 5px;} .smallbox5 {ancho: 100px; Altura: 100px; Color de fondo: rojo; Boder: 3px negro sólido; margen: 5px;} .smallbox6 {ancho: 100px; Altura: 100px; Color de fondo: rojo; Cuerpo: 3px de negro sólido; margen: 5px;} .bigbox1, .bigbox2 { /*ancho: 400px;* / /*ancho: 400px;* / background-color: verde; borde: 3px negro sólido; } </style> </head> <body> <div class = bigbox1> <div class = smallbox1> </iv> <div class = smallbox2> </div> <div class = smallbox3> </div> </div> <iv class = bigbox2> <d class = smallbox44> </div> <iv class = smallBox5> </iv> <iv class = smallBox2> <StilBox4> <Div Div> <Viv> <Div Class class = smallbox5> </div> <div class = smallbox6> </div> </div> </body> </html> 2. La segunda forma de despejar el flotadorAgregue un atributo claro al siguiente atributo
El atributo claro toma el valor:
Ninguno: el valor predeterminado se toma, se clasifica de acuerdo con las reglas de clasificación de los elementos flotantes (flotación izquierda para encontrar flotador izquierdo, flotante derecho para encontrar flotador derecho)
Izquierda: no busque el elemento flotante izquierdo en el frente
Derecha: no busques el elemento flotante correcto en el frente
Ambos: no busques los elementos flotantes y flotantes de la izquierda en el frente
Por ejemplo: no establecemos el ancho y la altura de la caja grande, la pequeña caja admitirá la caja grande, pero las dos cajas grandes estarán en fila debido a esto.
.smallbox1 {ancho: 100px; Altura: 100px; flotante: izquierda; Color de fondo: rojo; borde: 2px negro sólido; } .smallbox2 {ancho: 100px; Altura: 100px; flotante: izquierda; Color de fondo: rojo; borde: 2px negro sólido; } .smallbox3 {ancho: 100px; Altura: 100px; flotante: izquierda; color de fondo: azul; borde: 2px negro sólido; } .smallbox4 {ancho: 100px; Altura: 100px; flotante: izquierda; color de fondo: azul; borde: 2px negro sólido; } </ystye> </head> <body> <div class = bigbox1> <div class = smallbox1> </div> <div class = smallbox2> </div> </div> <div class = bigbox2> <div class = smallbox3> </div> <divse class = smallbox4> </div> </div> </body>Utilizamos el atributo transparente en el tercer cuadro pequeño, para que podamos iniciar una nueva línea (la cuarta no es necesaria, porque queremos que el tercero sea al lado del cuarto), y solo necesitamos el código del tercer cuadro pequeño para modificar el código.
.smallbox3 {claro: izquierda; Ancho: 100px; Altura: 100px; flotante: izquierda; color de fondo: azul; borde: 2px negro sólido; }Nota: El atributo de margen ha expirado, y hablaremos sobre el método que no caduca la próxima vez.
3. Código fuente:D131_CLEARFLOAT.HTML
D132_CLearAttribute.html
DIRECCIÓN:
https://github.com/ruigege66/html_learning/blob/master/d131_clearfloat.html
https://github.com/ruigege66/html_learning/blob/master/d132_clearAttribute.html
ResumirLo anterior son dos formas de eliminar el HTML flotante que el editor le presenta. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!
Si cree que este artículo es útil para usted, reimprima. Por favor, indique la fuente, ¡gracias!