CSS中Float和Clear属性的使用

踏浪行歌

大家肯定会经常用到float这个属性 " n* {/ \' G# t$ X" R因为用div布局的时候 特别是两分栏或者三分栏结构的网站 我们都需要在一个大的div下构建2或者3个布局的div 这几个div的分布就需要用float属性来实现水平排列（当然也可以不用float属性改用绝对布局） 大家通常用到的float属性一般有left和right w! }" z5 M% k* z2 S% S举个例子： 引用 5 Q) Y I0 ^+ r: M( b<div> 8 A# ]9 v( C2 b. U. M" F, N3 ?7 K <div id="left_content"> ! x" G7 a, ] P* P</div> - R( i6 f' L5 h, P& J <div id="right_content"> </div> s8 B% g/ |9 d$ C4 l <div id="bottom"> % W7 Z: T+ K* K$ M( A</div> Q+ |$ M2 w2 h7 `) c1 g# I! E8 \</div> - l/ I' i7 ~4 C) C1 } ; J8 ?& c" g1 J3 J在上面这段代码中大家通常会把id为left_content和right_content的float属性设为left或者right 这样两个主分栏就实现了水平排列 这里没有什么特殊的 我要说的是 大部分人会忘记给bottom加上clear（clear:both）属性 当然在IE里面这样做并没有什么不好 相对“智能”的IE会自动把bottom排列在上面两个div的下面 * y: T* V' c8 L) Q7 P5 T: {但是在firefox就没这么好说话了 它会严格按照float的属性来工作 因为right_content的float属性设为left或者right 所以作为溢出的bottom会被排列在上述两个分栏的左边或者右边 这样就严重影响了计划的布局 % i8 v! ]% s* \4 O) U " r* h9 F0 M( @所以希望以后大家在做这种布局的时候不要忘记在水平分栏之外的div里加上clear的属性 : M h) I5 V0 v, F' U {. d a并顺便介绍一下clear属性 引用 4 O8 Q5 j8 u; {, k$ H, vclear属性： left：清除左边浮动对象 right：清除右边浮动对象 both：两边都不允许有浮动对象 none：两边都可以有浮动对象