CSS中Float和Clear属性的使用

踏浪行歌

大家肯定会经常用到float这个属性 4 z8 G" |2 D/ l9 \5 }因为用div布局的时候 特别是两分栏或者三分栏结构的网站 我们都需要在一个大的div下构建2或者3个布局的div . _0 Q4 r7 ^$ i3 I, A3 ^- a4 H- B这几个div的分布就需要用float属性来实现水平排列（当然也可以不用float属性改用绝对布局） 大家通常用到的float属性一般有left和right 举个例子： 引用 <div> <div id="left_content"> : m2 C' X; X& \, l( Y- p</div> % g3 C- c; c( A- S: z <div id="right_content"> </div> ( T5 m6 M: z' O9 p: k0 l/ R6 C; H& t <div id="bottom"> , s1 O8 @8 q( k</div> </div> ( y+ j) G9 A( y: V% o2 d* l 在上面这段代码中大家通常会把id为left_content和right_content的float属性设为left或者right 8 k" L' }6 }6 s0 ^5 f+ r- J4 X这样两个主分栏就实现了水平排列 * M% `; ~4 t- F+ h这里没有什么特殊的 我要说的是 大部分人会忘记给bottom加上clear（clear:both）属性 当然在IE里面这样做并没有什么不好 相对“智能”的IE会自动把bottom排列在上面两个div的下面 但是在firefox就没这么好说话了 它会严格按照float的属性来工作 5 M- N; K2 q7 l$ g0 d0 S& D) C因为right_content的float属性设为left或者right 所以作为溢出的bottom会被排列在上述两个分栏的左边或者右边 这样就严重影响了计划的布局 所以希望以后大家在做这种布局的时候不要忘记在水平分栏之外的div里加上clear的属性 3 s% |( {* s! O1 R2 N并顺便介绍一下clear属性 引用 clear属性： left：清除左边浮动对象 , |! f0 a, _, e: L, Hright：清除右边浮动对象 ) T: n ?8 ~) }8 wboth：两边都不允许有浮动对象 none：两边都可以有浮动对象