CSS中Float和Clear属性的使用

踏浪行歌

大家肯定会经常用到float这个属性 因为用div布局的时候 特别是两分栏或者三分栏结构的网站 我们都需要在一个大的div下构建2或者3个布局的div , z% v7 @8 s+ l% e) |+ L这几个div的分布就需要用float属性来实现水平排列（当然也可以不用float属性改用绝对布局） 1 x4 F; E( m" I" O4 M% u7 B8 y6 U大家通常用到的float属性一般有left和right 举个例子： 引用 , E% O3 u+ }/ T8 h<div> 1 [: B+ Y3 K' O; i2 J7 ` + p+ ~$ e; u6 c( |9 ^1 T; g<div id="left_content"> </div> " k2 e3 O9 u1 Z6 R <div id="right_content"> 9 s! i. V# ^4 \0 O! v</div> % t# K6 z- x2 o& K$ G* Z0 t0 O , Q9 ]( `, y' i" u<div id="bottom"> 7 _8 o+ s8 _ `5 S; H# C3 \</div> ( c% x3 g' o1 H% J6 J' A</div> 在上面这段代码中大家通常会把id为left_content和right_content的float属性设为left或者right 这样两个主分栏就实现了水平排列 , D0 l- h/ Y/ e# _) B7 w6 u这里没有什么特殊的 我要说的是 大部分人会忘记给bottom加上clear（clear:both）属性 ( ~( s; A+ u* e当然在IE里面这样做并没有什么不好 相对“智能”的IE会自动把bottom排列在上面两个div的下面 * w/ _$ n Z6 [2 F但是在firefox就没这么好说话了 它会严格按照float的属性来工作 / L& P+ W+ j% U% ^8 @因为right_content的float属性设为left或者right 所以作为溢出的bottom会被排列在上述两个分栏的左边或者右边 这样就严重影响了计划的布局 " a f3 D$ C. Q- I) ] # z9 s4 {2 u; O, _* R0 H7 ]0 x所以希望以后大家在做这种布局的时候不要忘记在水平分栏之外的div里加上clear的属性 并顺便介绍一下clear属性 引用 2 K8 v1 ]2 n8 R- f3 N( g0 @! `5 wclear属性： left：清除左边浮动对象 $ n) _) z9 M% a h) K' t+ A9 q' Yright：清除右边浮动对象 ) L1 q0 c d% |( g# `both：两边都不允许有浮动对象 none：两边都可以有浮动对象