CSS Clear Float

Clear floating mainly say three ways.

The first type: Clear:both

<style>. Clear{Clear:both;    }. F-left{float: Left;    }</style><Divclass= "outer">    <Divclass= "Div1 f-left">1</Div>    <Divclass= "Div2 f-left">2</Div>    <Divclass= "Div3 f-left">3</Div>    <Divclass= "Clear"></Div></Div>

For the first method:

Advantages: Simple, less code, good browser support, not prone to strange problems

Cons: To add a lot of empty div

The second type: parent element Add Overflow:hidden

<style>. Over-flow{Overflow:Hidden;    }</style><Divclass= "outer over-flow">//Add a class here<Divclass= "Div1 f-left">1</Div>    <Divclass= "Div2 f-left">2</Div>    <Divclass= "Div3 f-left">3</Div></Div>

The third type: after Pseudo class

<style>. Clearfix:after{content:'. ';Display:Block;Visibility:Hidden;Height:0;Line-height:0;font-size:0;Clear:both;}. Clearfix{Zoom:1;/* Main compatible ie*/}</style><Divclass= "Div1 clearfix">      <Divclass= "Left">Left</Div>       <Divclass= "Right">Right</Div> </Div>

For the third type: IE8 and non-IE browsers are supported: After, principle and method 2 somewhat similar, zoom (ie proprietary properties) can solve the ie6,ie7 floating problem.

CSS Clear Float