CSS---floating problem

Floating: When an element contains a floating element, the element is automatically shrunk rather than being stretched by a floating element;

Floating instances:

When not floating:

Effect in Browser:

After adding a float:

In the browser:

You can see that the parent element with the class name wrap is highly collapsed and becomes a line after adding a float.

The methods for clearing floats are:

1, after the floating element plus a class name clear blank tag, and in the CSS style Liqingfeng except floating. (added a meaningless empty tag)

2, to the parent element wrap defined height (but is not applicable when the height is unknown)

3, add style Overflow:hidden/scroll/auto to the parent element. (May hide useful things when using hidden)

4. Add Clearfix to the parent element class name and add it to the style.

. Clearfix:before,.clearfix:after{display:table;content: "";}
. Clearfix:after{clear:both;}

. clearfix{*zoom:1}

These four methods can clear the float (all can achieve the effect without floating, but have their own shortcomings and advantages)

Effect: