It is well known model is a floating visual formatting model. Floating frame can move around (i.e.: float: left; float: right), until its outer edge comprises a box or another encounter the edges of the floating frame. Normal flow is not floating box in the document, so the block box ordinary stream of the document in the box does not behave like a floating exist.
.wrapper{
border:5px solid #000;
/*height:300px;*/
}
ul{
margin:0;
padding:0;
/*height:300px;*/
border:1px solid #f00;
/*float:left;*/
}
li{
float:left;
height:100px;
list-style:none;
padding:5px 10px;
}
Clear float method:
To prevent the line outside the box floating around in the box, we need to include these elements in the application of clear property line box. Clear attribute values may be left, right, both, or none, which indicates that the border should not float next frame. When cleaning element, the element browser add enough margins, that the float down to below the top edge of the vertical frame elements.
Floats out of the document flow, does not affect the surrounding elements. However, cleaning elements actually float in front of the vertical space left.
Method a: adding a block element with clear property after floating element.
.clear{
clear:both;
}
This will achieve our desired effect, but to add unnecessary code, makes no sense to label code.
Method two: pseudo-class selector: after
Method three: using overflow: hidden or side effects of auto, automatically clean up any bitterness in the floating element. The parent attribute overflow disposed at the block floating elements: hidden or auto;
This is a useful element cleaning method, no need to add extra markup. This method is not suitable for all cases, because of the overflow box set will affect its performance. More specifically, this process produces a scroll bar or in some cases cut off next time content.
Method four: If the child content is fixed, may be provided to the appropriate height parent element.
This article is reproduced in: About float float