Overview: In order to solve the parent element as a child and an internal height problem 0 (in many cases is not convenient to the parent element is high, because they do not know how much content, so that the inside of the box propped up automatic height), remove the floating nature of floating called closed better, it is to remove floating floating box off to the inside, so that the parent box closed exit and entrance, do not let them out of the influence of other elements.
Usage: Selector {clear: Property Value} [left | right | both] Usually used both
left: left floating elements are not allowed
right: the right floating elements allowed
both: Effect clears both the right and left floating
A method, additional labeling law
Add a tag at the end of the floating element empty example:
<div style = "Clear: both"> </ div>
advantages: easy to understand, easy writing
disadvantages: add a number of meaningless tag, structured poor
Method Two, the parent add overflow
Triggered by BFC may also be implemented
can be added to the parent overflow: hidden | auto | scroll can achieve
advantages: code is simple
Disadvantages: easily lead to an increase in the content of the time would not lead to wrap content is hidden and can not display the element to be spilled
Three methods using clear float after pseudo-element
.clearfix:after {
content:; / * content as small dots, try not to be empty, to prevent the old version discard * /. ""
display: block;
height: 0;
visibility: hidden; / * hide the box * /
clear: both;
}
.clearfix {
* Zoom: 1; symbol / * represents ie6 7 recognizes special symbols with * only ie6 7 to execute, clear ie6 7 browser's handling * /
}
Shortcoming ie 6 7 does not support all the required zoom
Method IV, using pseudo-element before and after double floating Clear
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
Recommended Use