Home >Web Front-end >HTML Tutorial >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
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