Home > Article > Web Front-end > What are the methods for clearing floats in CSS?
What are the methods for clearing floats in CSS?
- 零下一度Original
- 2017-06-30 10:47:131341browse
Floating---- will cause the current label to float up, causing the height of the parent label to collapse
1. Specify the height for the parent element
Simple and crude! The height is variable, and if the internal height is greater than the parent, problems may easily arise
2. Add additional tags after the floating element
Other
tags can also be produced Empty tags lead to confusing code, difficult to maintain, and the intuitive feeling of the code is very bad
3. Add overflow:hidden;zoom:1 or overflow:hidden;width:98% style to the parent tag < ;div style="overflow:hidden; zoom:1">
Zoom:1 is added for compatibility In IE6, there must be one of zoom and width, but the height value cannot be set. The browser can automatically obtain the height of the floating area,
and cannot be used together with position, because it will cause the problem of hiding beyond the size.
4. Set overflow:auto for the parent tag
It is basically the same as 3, the only problem is that if the internal height is higher than the parent, a roller will appear
5. Add float to the parent element, and everyone will become one The overall floating block
Will cause new floating problems
6. Add display: table to the parent tag
; ;div style="position:absolute; zoom:1">
It is connected with the 5 principles, both Detaching the parent element from the original text flow may cause similar problems, but you can still use this method to solve it
8. Define the pseudo-class: after for the parent tag, and zoom: 1
.clearfix:after { display:block; clear:both; content:""; visibility:hidden; height:0}
.clearfix {zoom:1}
The above is the detailed content of What are the methods for clearing floats in CSS?. For more information, please follow other related articles on the PHP Chinese website!