The effect of floating on the page
If a parent box has a child box, and the parent box is not set high, the child box is floated in the parent box, then the height of the parent box will be 0 in the future.
Since the height of the parent box is 0, the following elements will be automatically filled, so at this time, the float should be cleared.
For details on CSS floating, see http://www.w3school.com.cn/css/css_positioning_floating.asp
How to clear floats
1. The parent div defines height
Principle: The parent div manually defines the height, which solves the problem that the parent div cannot automatically obtain the height.
Advantages: Simple, less code, easy to master.
Disadvantages: only suitable for fixed-height layouts, to give an accurate height, if the height is not the same as the parent div, it will cause problems.
Recommendation: Not recommended, only recommended for fixed-height layouts.
2. Add an empty div tag at the end clear:both
Principle: Add an empty div, use the clear:both improved by CSS to clear the float, so that the parent div can automatically get the height.
Advantages: Simple, less code, good browser support.
Disadvantages: Many beginners do not understand the principle; if there are many floating layouts on the page, it is necessary to add a lot of empty divs.
Suggestion: This method is a clear float method that was mainly used in the past.
3. The parent div defines pseudo-classes: after and zoom
**Principle: **IE8 and above and non-IE browsers only support: after, the principle is similar to method 2, zoom (IE has attributes) can solve the floating problem of ie6 and ie7.
Advantages: good browser support (currently used by large websites, such as Tencent, Netease, Sina, etc.).
Disadvantages: There is a lot of code, and many beginners do not understand the principle. It takes two sentences of code to be used together to make mainstream browsers support it.
Recommendation: Recommended, it is recommended to define public classes to reduce CSS code.
4. The parent div defines overflow: hidden
Principle: width or zoom: 1 must be defined, and height cannot be defined at the same time. When using overflow: hidden, the browser will automatically check the height of the floating area.
Advantages: Simple, less code, good browser support.
Disadvantage: Cannot be used with position, because the excess size will be hidden.
Suggestion: It is only recommended for friends who do not use position or who have a deep understanding of overflow:hidden.
5. The parent div defines overflow:auto
Principle: width or zoom: 1 must be defined, and height cannot be defined at the same time. When overflow: auto is used, the browser will automatically check the height of the floating area.
Advantages: Simple, less code, good browser support.
Disadvantage: When the inner width and height exceed the parent div, scroll bars will appear.
Suggestion: Use if scrollbars are required or ensure that the code does not appear scrollbars.
6. The parent div also floats together
Principle: All codes float together and become a whole.
Disadvantage: New float problems will be created.
Recommendation: Not recommended, just for understanding.
7. The parent div defines display:table
Principle: Turn the div attribute into a table.
Disadvantage: New unknown problems will be created.
Recommendation: Not recommended, just for understanding.
8. Add br tag at the end clear:both
Principle: The parent div defines zoom:1 to solve the IE floating problem, and add the br tag clear:both at the end.
Suggestion: Not recommended, just for understanding.
For more content, please pay attention to the WeChat public account "Let Knowledge Become an Asset".