What methods does css have to clear floats?

This article is about what css has to do to clean up floats. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Description

1. Define the height for the parent div.

Principle: defining a fixed height for the parent DIV can solve the problem that the parent DIV cannot obtain the height.

2. Use empty elements.

For example, (.clear {clear:both})

Principle: add a pair of empty DIV tags, use the clear:both attribute of css to remove the float, and let the parent DIV get the height.

3. Let the parent div float together.

This can initially solve the current floating problem. But also let the parent float, it will give rise to new floating problems. Use is not recommended.

4. The parent div defines display:table.

Principle: force the div property to be converted to a table.

5. The parent element sets overflow:hidden,auto.

Principle: the key to this method is to trigger BFC. IE6 also needs to trigger hasLayout (zoom:1)

6. The parent div defines pseudo classes.

After and zoom.

Example

.clearfix: after {content:'.'; display:block; height:0; clear:both; visibility: hidden;}. Clearfix {zoom:1;} Thank you for reading! This is the end of this article on "what are the ways to remove floats in css?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!