Réglez la hauteur de l'élément parent précédent. Remarque: Dans le développement de l'entreprise, n'écrivez pas la hauteur si vous pouvez le faire.
<! Doctype html> <html lang = en> <éad> <meta charset = utf-8> <tight> d131_clearfloat </title> <style> .smallbox1 {width: 100px; hauteur: 100px; Color d'arrière-plan: rouge; Boder: Black solide 3px; marge: 5px; float: droit;} .smallbox2 {width: 100px; hauteur: 100px; Color d'arrière-plan: rouge; Boder: Black solide 3px; marge: 5px;} .smallbox3 {largeur: 100px; Color d'arrière-plan: rouge; Boder: Black solide 3px; marge: 5px;} .smallbox3 {largeur: 100px; hauteur: 100px; Color d'arrière-plan: rouge; Boder: Black solide 3px; marge: 5px;} .smallbox4 {largeur: 100px; hauteur: 100px; Color d'arrière-plan: rouge; Boder: Black solide 3px; marge: 5px;} .smallbox5 {largeur: 100px; hauteur: 100px; Color d'arrière-plan: rouge; Boder: Black solide 3px; marge: 5px;} .smallbox6 {largeur: 100px; hauteur: 100px; Color d'arrière-plan: rouge; Corps: 3px noir solide; marge: 5px;} .bigbox1, .bigbox2 {/ * width: 400px; * / / * width: 400px; * / background-Color: vert; Border: 3px Black solide; } </ style> </ head> <body> <div class = bigbox1> <div class = smallbox1> </div> <div class = smallbox2> </div> <div class = smallbox3> </v> </v> <div class = bigbox2> <div class = smallbox4> </v> <v class = smallbox5> </v> <v class = smallbox2> class = smallbox5> </div> <div class = smallbox6> </div> </div> </ody> </html> 2. La deuxième façon de nettoyer le flotteurAjouter un attribut clair à l'attribut suivant
L'attribut clair prend la valeur:
Aucun: la valeur par défaut est prise, triée en fonction des règles de tri des éléments flottants (flotteur gauche pour trouver le flotteur gauche, flotteur droit pour trouver le flotteur droit)
Gauche: ne cherchez pas l'élément flottant gauche à l'avant
À droite: ne cherchez pas l'élément flottant droit devant
Les deux: ne cherchez pas les éléments flottants et flottants gauche à l'avant
Par exemple: nous ne définissons pas la largeur et la hauteur de la grande boîte, la petite boîte prendra en charge la grande boîte, mais les deux grandes cases seront sur une ligne à cause de cela.
.smallbox1 {largeur: 100px; hauteur: 100px; flottant: à gauche; Color d'arrière-plan: rouge; Border: 2px noir solide; } .smallbox2 {width: 100px; hauteur: 100px; flottant: à gauche; Color d'arrière-plan: rouge; Border: 2px noir solide; } .smallbox3 {width: 100px; hauteur: 100px; flottant: à gauche; Color en arrière-plan: bleu; Border: 2px noir solide; } .smallbox4 {width: 100px; hauteur: 100px; flottant: à gauche; Color en arrière-plan: bleu; Border: 2px noir solide; } </ style> </ head> <body> <div class = bigbox1> <div class = smallbox1> </div> <div class = smallbox2> </div> </div> <div class = bigbox2> <div class = smallbox3> </div> <div class = smallbox4> </div> </div> </body> </vingNous utilisons l'attribut Clear sur la troisième petite boîte, afin que nous puissions démarrer une nouvelle ligne (la quatrième n'est pas nécessaire, car nous voulons que le troisième soit à côté du quatrième), et nous n'avons besoin que du code de la troisième petite boîte pour modifier le code.
.SmallBox3 {Clear: Left; Largeur: 100px; hauteur: 100px; flottant: à gauche; Color en arrière-plan: bleu; Border: 2px noir solide; }Remarque: l'attribut de marge a expiré et nous parlerons de la méthode qui n'expire pas la prochaine fois.
3. Code source:D131_clearfloat.html
D132_clearattribute.html
adresse:
https://github.com/ruigege66/html_learning/blob/master/d131_clearfloat.html
https://github.com/ruigege66/html_learning/blob/master/d132_clearattribute.html
RésumerCe qui précède est deux façons d'effacer le HTML flottant que l'éditeur vous présente. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!
Si vous pensez que cet article vous est utile, veuillez le réimprimer. Veuillez indiquer la source, merci!