CSS remove float

When floating is used for a label, the content of the block will be separated from the document flow, and its parent element will no longer wrap the content of the label, and the height of the parent element will become 0, causing the problem of height collapse. At this time, it is necessary to clearly float. Today, I will introduce several methods for clearing floats in CSS. 

1. Add an empty div at the end of the document, as follows

<div style="clear:both"></div>

• 1

But if this method is used, meaningless tags are added, which violates the essence of web structure of separation of structure and presentation. Difficult to maintain later.

2. Add overflow:auto/hidden to the floated element When adding overflow:auto/hidden to the floated element, the floated element will return to the document flow and support the container. 

3. Let the parent element also float If the parent element also needs to be clearly floated, then the parent element of the parent element must also be floated... Then the entire page is built on the basis of floating. 

4. Add a .clearfix, using pseudo elements

.clearfix:after,
.clearfix:before{
    content:"";
    display: table;//防止当前盒子的margin-bottem与下一个盒子的margin-top叠加
}
.clearfix:after{
    clear: both;
}
.clearfix{
    zoom:1;//为ie6,ie7的兼容性设置
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11