Several methods for clearing floats in HTML

This article talks about 6 ways to clear the floating HTML elements for your reference. Please see below for details

What will happen when using display: inline-block:

1. Make block elements display in one line

2. Make inline support width and height

3. Line breaks are parsed

4. When not set, the width is Content expansion

5. Support block tags in IE6 and 7

Because the inline-block attribute is parsed when wrapping (there is a gap), the solution is to use float:left/right

Situations that occur when using float:

1. Make the block element display in one line
2. Make the inline element support width and height
3. Do not set the width and height When the width is stretched by the content
4. Line breaks are not parsed (so when using inline elements, you can use floats to clear gaps)
5. Adding floats to elements will break away from the document flow and move in a specified direction. , until it hits the boundary of the parent or another floating element stops (the document flow is the position occupied by the displayable objects in the document when arranged)

      
  
p1
 
p2
 span1 span2  

The following code only floats box1, then box1 and box2 overlap Together. If both are floating, there will be no overlap.

Methods to clear floating:
1. Add floats to the parent as well(In this case, when the parent margin: 0 auto; Not centered)

2. Add display:inline-block; to the parent (same as method 1, not centered. Only IE6 and 7 are centered)

3. Add

4. Add

under the floating element. 5. Add {zoom:1;}

:after{content:""; display:block;clear:both;}

6. Add overflow:auto;

to the parent of the floating element. The above is the entire content of this article. I hope it will be helpful to everyone’s learning. For more related content, please Follow PHP Chinese website!

Related recommendations:

How to use Html to block the right-click menu and left-click swipe function

##About HTML Text formatting code

#

The above is the detailed content of Several methods for clearing floats in HTML. For more information, please follow other related articles on the PHP Chinese website!