CSS中Float和Clear属性的使用

踏浪行歌

大家肯定会经常用到float这个属性 # V: T/ R! x' f( P/ ?( Y6 H因为用div布局的时候 特别是两分栏或者三分栏结构的网站 ; A& P* J3 {+ J4 ?我们都需要在一个大的div下构建2或者3个布局的div . l4 V P9 P2 Y6 b这几个div的分布就需要用float属性来实现水平排列（当然也可以不用float属性改用绝对布局） 4 C* ]0 Z$ k- G9 p1 s0 j大家通常用到的float属性一般有left和right 举个例子： 引用 <div> 1 x% Q2 d( i6 i. ]# L <div id="left_content"> 5 K6 `+ p2 B& o( d+ Q/ N</div> ) g1 D, U5 c# u4 y- }9 H* v % F; ^' U: e9 l! a6 B<div id="right_content"> </div> 3 }( H) }' u1 p: ` <div id="bottom"> ' O# X. x1 T+ c- y</div> ) z+ j9 Z, O( W</div> 4 W/ U2 v. w3 d" W# X 在上面这段代码中大家通常会把id为left_content和right_content的float属性设为left或者right % x+ l) E( ^) d R3 g. T( L这样两个主分栏就实现了水平排列 ' R' ?1 t5 i3 a- H这里没有什么特殊的 我要说的是 大部分人会忘记给bottom加上clear（clear:both）属性 当然在IE里面这样做并没有什么不好 相对“智能”的IE会自动把bottom排列在上面两个div的下面 但是在firefox就没这么好说话了 它会严格按照float的属性来工作 因为right_content的float属性设为left或者right 所以作为溢出的bottom会被排列在上述两个分栏的左边或者右边 这样就严重影响了计划的布局 $ J) C' H" F/ f, G1 j: ~ 所以希望以后大家在做这种布局的时候不要忘记在水平分栏之外的div里加上clear的属性 6 B0 u: n3 ^9 x \7 o1 |并顺便介绍一下clear属性 引用 : F8 v& c- H! O7 F$ e+ }; @' _clear属性： left：清除左边浮动对象 right：清除右边浮动对象 both：两边都不允许有浮动对象 none：两边都可以有浮动对象