1. The parent div defines the 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, you need to give the exact height, if the height is different from the parent div, there will be problems
Suggestions: Not recommended, only fixed-height layouts are recommended
2. Add an empty div tag clear:both at the end; principle
: add an empty div, use the clear:both improved by css to clear the float, so that the parent div can automatically obtain the height
Advantages : simple, less code, browser support Good, it is not easy to have strange problems
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, which makes people feel very bad
Recommendation: Not recommended, but this method was mainly used in the past A method of clearing the float
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 ie6, ie7 floating problem
Advantages : good browser support, not easy to have strange problems (currently: used by large websites, such as Tengxun, Netease, Sina, etc.)
Disadvantages: a lot of code, many beginners do not understand the principle, need two It can only be supported by mainstream browsers when used in combination with the code.
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 overflow:hidden is used, the browser will automatically check the height of the floating area
Advantages: simple, less code, good browser support
Disadvantages: 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, browser support Good
Disadvantage : When the inner width and height exceed the parent div, a scroll bar will appear.
Recommendation: Not recommended, use it if you need scrollbars or make sure your code doesn't show scrollbars.
6. The parent div also floats together;
principle: all codes float together, and they become a whole.
Advantages : no advantages
Disadvantages: new floating problems will occur.
Recommendation: Not recommended, just for understanding.
7. The parent div defines display:table;
Principle: Turn div attributes into tables
Advantages: No advantages
Disadvantages: New unknown problems will arise.
Recommendation: Not recommended, just for understanding.
8. Add the br tag clear:both at the end;
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.