CSS中Float和Clear属性的使用

踏浪行歌

大家肯定会经常用到float这个属性 因为用div布局的时候 特别是两分栏或者三分栏结构的网站 - }) B+ S: T$ [我们都需要在一个大的div下构建2或者3个布局的div 这几个div的分布就需要用float属性来实现水平排列（当然也可以不用float属性改用绝对布局） - ?- ^# @3 ` P大家通常用到的float属性一般有left和right 举个例子： 引用 - M/ d4 m3 I$ r) Q, ]7 z, x. c" _<div> & L Q4 J' }- O# I1 ] <div id="left_content"> </div> $ P- _' d" ~5 I. p4 ?6 K' j . b4 @5 z7 c9 M/ h, g( R: Z9 |' q1 o<div id="right_content"> 3 u: p: k7 ^! D7 l</div> % m, t2 ~" M; S0 B <div id="bottom"> </div> </div> & t4 R3 s& X6 V, I* H9 p( {$ u3 u 在上面这段代码中大家通常会把id为left_content和right_content的float属性设为left或者right 2 q% x$ V) n0 b这样两个主分栏就实现了水平排列 9 W5 v# O% n7 w g9 }$ A3 Q8 \这里没有什么特殊的 我要说的是 大部分人会忘记给bottom加上clear（clear:both）属性 8 ~3 }2 u, r) K当然在IE里面这样做并没有什么不好 相对“智能”的IE会自动把bottom排列在上面两个div的下面 ( v$ `/ |- F7 ^! i# S4 s但是在firefox就没这么好说话了 它会严格按照float的属性来工作 " {# D: L1 P# N% S. N因为right_content的float属性设为left或者right 所以作为溢出的bottom会被排列在上述两个分栏的左边或者右边 这样就严重影响了计划的布局 ! V, p+ Y5 Z3 _- \) Q' f* Q 所以希望以后大家在做这种布局的时候不要忘记在水平分栏之外的div里加上clear的属性 并顺便介绍一下clear属性 引用 ( j! ]- b: n# [* g) [5 J( Yclear属性： $ C' _8 m: P# `; L, c0 e: P [left：清除左边浮动对象 right：清除右边浮动对象 both：两边都不允许有浮动对象 none：两边都可以有浮动对象