CSS Clear Float

function: achieve picture and text mixed effect

principle: Absolutely positioned elements are out of the document flow, while floating elements are still in the document flow;

Clear float: ( height collapse)

1. Additional labeling method, <div style= "Clear:both;" ></div> (Cons: But this approach adds extra tags to make the HTML structure look less concise.) ）

2. Use the after pseudo-element (the method must set height:0 in a pseudo-object that needs to clear the floating element, otherwise the element will be a few pixels higher than the actual)

#parent {zoom:1}

#parent: after{

Content: ".";

height:0; line-height:0;

Visibility:hidden;

Display:block;

Clear:both;

}

3. Overflow + Zoom method (Zoom, IE unique properties, similar to zoom)

. Fix{overflow:hidden; zoom:1;}

(The problem is this overflow:hidden, it is a small fried egg, if the elements in the inside if you want a margin negative positioning or negative absolute positioning, it is not directly cut off, so this method has no small limitations. )

CSS Clear Float