Two ways to clear floating in HTML

Author：Eve Cole Update Time：2025-04-09 12:32:02

1. Way to clear floating

Set the height for the previous parent element. Note: In enterprise development, do not write the height if you can do it.

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>D131_ClearFloat</title> <style> .smallbox1{ width:100px; height:100px; background-color: red; boder:3px solid black; margin:5px; float:right; } .smallbox2{ width:100px; height:100px; background-color: red; boder:3px solid black; margin:5px; } .smallbox3{ width:100px; background-color: red; boder:3px solid black; margin:5px; } .smallbox3{ width:100px; height:100px; background-color: red; boder:3px solid black; margin:5px; } .smallbox4{ width:100px; height:100px; background-color: red; boder:3px solid black; margin:5px; } .smallbox5{ width:100px; height:100px; background-color: red; boder:3px solid black; margin:5px; } .smallbox6{ width:100px; height:100px; background-color: red; body:3px solid black; margin:5px; } .bigbox1,.bigbox2{ /*width:400px;*/ /*width:400px;*/ background-color: green; border:3px black solid; }</style></head><body><div class=bigbox1> <div class=smallbox1></div> <div class=smallbox2></div> <div class=smallbox3></div></div><div class=bigbox2> <div class=smallbox4></div> <div class=smallbox5></div> <div class=smallbox2> <div class=smallbox4></div> <div class=smallbox5></div> <div class=smallbox6></div></div></body></html>

2. The second way to clear the float

Add a clear attribute to the following attribute

The clear attribute takes the value:

none: The default value is taken, sorted according to the sorting rules of floating elements (left float to find left float, right float to find right float)

left: Don't look for the left floating element in front

right: Don't look for the right floating element in front

Both: Don't look for the left floating and floating elements in front

For example: We do not set the width and height of the big box, the small box will support the big box, but the two big boxes will be on a row because of this.

 .smallbox1{ width:100px; height: 100px; float:left; background-color: red; border:2px solid black; } .smallbox2{ width:100px; height: 100px; float:left; background-color: red; border:2px solid black; } .smallbox3{ width:100px; height: 100px; float:left; background-color:blue; border:2px solid black; } .smallbox4{ width:100px; height: 100px; float:left; background-color: blue; border:2px solid black; } </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>

We use the clear attribute on the third small box, so that we can start a new line (the fourth one is not needed, because we want the third one to be next to the fourth one), and we only need the code of the third small box to modify the code.

 .smallbox3{ clear:left; width:100px; height: 100px; float:left; background-color:blue; border:2px solid black; }

Note: The margin attribute has expired, and we will talk about the method that does not expire next time.

3. Source code:

D131_ClearFloat.html

D132_CLearAttribute.html

address:

https://github.com/ruigege66/HTML_learning/blob/master/D131_ClearFloat.html

https://github.com/ruigege66/HTML_learning/blob/master/D132_CLearAttribute.html

Summarize

The above are two ways to clear the floating HTML that the editor introduces to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!

If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!