6 ways to clear floats in html_html/css_WEB-ITnose

For details, please click

What will happen when using display: inline-block:

1. Make the block element display in one line
2. Make the inline support width and height
3. Line breaks are parsed
4. When not set The width is supported by the content
5. In IE6 and 7, block tags will be supported

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

Situations that occur when using floats:

1. Make block elements display in one line
2. Make inline elements support width and height
3. When no width and height are set The width is supported 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 displayable objects in the document when arranged)

Clear the float Method:
1. Add a float to the parent (in this case, the parent margin: 0 auto; will not be centered)

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

3. Add

under the floating element;

4. Add

5. Add {zoom:1;}
to the parent of the floating element :after{content:""; display:block;clear:both; }

6. Add overflow:auto to the parent of the floating element;

Source: http://www.jb51.net/article /43261.htm

For more html/css content, please click