Parent HTML element because the DIV (block element) in floating height due to subsidence Solution to Problem

Fees man of few words said, directly on the issue:

1. beginning, only two pages DIV nested (see figure)

 

Operating results are:

Now look at running is normal, but when I set let class = "box2" when the floating DIV

Run the result is this:

 As can be seen in FIG, box1 has no any height, since the float property set box2, box2 from the document flow (as may be appreciated from floating due box2 browser page, floats on top of the page), box1 there is no content to hold up

2. Solution

Was added to the box1 clearFix class, clear float

 

.clearFix: After,
.clearFix: before {
/ * add content around box1 "" * /
Content: "";
/ * make the interconnection elements into a block element * /
the display: Block;
/ * clear the sides of the floating * /
Clear: both;
}