A clear floating approach to exploration

When floating float is used, if the parent Div does not use float, and the child Div uses float, the following conditions may occur:

Yes, the parent div that was supposed to be open was not open, which was awkward.

So what should be done about this floating problem?

1. Simplest practice: Set the parent class height.

Sets the div of the parent class to a fixed height, but if the height of the subclass is greater than the height of the parent class, the height of the Runjs test stepfather class will vary with the height of the subclass.

2. Entry-level approach: Clear:both;

Add an empty div after the parent Div, set the property to Clear:both; (Clear the left and right floats)

This is a widely used method.

3. Phenomenon-level approach: the use of Pseudo-class: After combined with 2 method +zoom.

The HTML is as follows:

<Divclass= "Father">    <Divclass= "Child">    </Div>    <Divclass= "Child">    </Div></Div>

The CSS is as follows:

. Father{Border:1px solid #fff; }. Child{width:100px;Height:20px;Border:1px solid Red;float: Left;}. Father:after{Display:Block;Clear:both;content:"";Visibility:Hidden;Height:0;}. Father{Zoom:1;}

Such methods are similar to 2, but better compatibility, better browser support, and no excessive div causes confusion on the page.

This is just a kind of clear floating ideas, there are several types of methods but here first introduce this idea

Discover how to float clearly