CSS中Float和Clear属性的使用

踏浪行歌

大家肯定会经常用到float这个属性 因为用div布局的时候 特别是两分栏或者三分栏结构的网站 我们都需要在一个大的div下构建2或者3个布局的div 6 G! q1 _' u' ]9 O, P/ P& B这几个div的分布就需要用float属性来实现水平排列（当然也可以不用float属性改用绝对布局） 7 F& D; d( e0 Q( t大家通常用到的float属性一般有left和right 举个例子： 引用 <div> - k- e5 X3 X% S) u, i* U2 ~) Z * g6 d6 F) ]) H! y<div id="left_content"> 2 \8 j! Z( r" w& S6 N% [- c$ @+ }</div> . O9 ~( X+ \3 h4 z' q$ O0 o( U6 c5 U # S2 z/ c) C+ a3 Y0 U<div id="right_content"> ' m1 g. K$ E( J2 v$ f, Q9 Y) d, [</div> * u' Y3 x! l* Z<div id="bottom"> </div> / q- e9 V- q( K) @$ k& r9 X</div> 在上面这段代码中大家通常会把id为left_content和right_content的float属性设为left或者right 5 B5 V) \$ b I5 V- j) w! `这样两个主分栏就实现了水平排列 这里没有什么特殊的 我要说的是 大部分人会忘记给bottom加上clear（clear:both）属性 / J4 }6 |8 {/ ~当然在IE里面这样做并没有什么不好 相对“智能”的IE会自动把bottom排列在上面两个div的下面 但是在firefox就没这么好说话了 它会严格按照float的属性来工作 因为right_content的float属性设为left或者right 所以作为溢出的bottom会被排列在上述两个分栏的左边或者右边 这样就严重影响了计划的布局 + ?" P$ M" f0 A; t* y+ y$ g, ]! J 所以希望以后大家在做这种布局的时候不要忘记在水平分栏之外的div里加上clear的属性 ( |5 x/ s) j* E7 q+ o+ J9 x- c并顺便介绍一下clear属性 引用 clear属性： : p2 f1 ^! e* fleft：清除左边浮动对象 right：清除右边浮动对象 both：两边都不允许有浮动对象 6 S" K* c- t9 ?- a) {* P1 R( mnone：两边都可以有浮动对象