When the sub-elements do not float when the height is the parent element to the child element hold up.
Child elements A and B are two div, exclusive line
The effect is as:
When the child element B float up, collapsed height to the height of the parent element only children of A
The effect is as:
When the CSS properties provided to the child element A (div): display: the inline, width and height will not work A, softened by the high content width, i.e. the letter A distraction. At this time, the parent element and to a height not collapse as A, but the same height B, and
The effect is as:
When the sub-elements A and B while floating up, CSS attribute A: display: inline failure, the effect of effect of float, while the height of the parent element is completely collapsed 0
The effect is as:
Solve the collapse Scenario 1 : allows the parent elements are also floating up, with the sub-elements in the same layer.
The effect is as:
But this time, if followed by an element in the back of the parent element, which will fill the position under the parent element blue background
FIG effect (parent element 2, yellow background, blue 2 times the height of the element):
Half the height of the parent 2 under the floating up into the blue element
This will cause problems layout disorder, under normal circumstances do not wish to be covered in subsequent elements, so give the parent element 2 add a CSS style clear: both;
The effect is as: This can solve the problem cover
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Solve the collapse Scenario 2 : to add a parent element CSS property overflow: hidden
This forces the parent element of the child element wrap live floating sub-elements parent element may be stretched width and height
FIG effect: In this case the layout can be normal parent 2, the problem will not be covered.
Method to solve the above two parent element collapse and cover the problem is I used two methods, please add.
(Tips: frequently change the style of the time, prone browser cache, namely the right to change the style, but the page does not look into a new style, very much affect the adjustment pattern, note)