CSS中Float和Clear属性的使用

踏浪行歌

大家肯定会经常用到float这个属性 因为用div布局的时候 特别是两分栏或者三分栏结构的网站 我们都需要在一个大的div下构建2或者3个布局的div ( s1 Q2 f- Y9 C- N这几个div的分布就需要用float属性来实现水平排列（当然也可以不用float属性改用绝对布局） 大家通常用到的float属性一般有left和right 6 e1 x; q+ K4 _$ O: `举个例子： 引用 <div> <div id="left_content"> </div> $ [6 X0 d/ X7 h. G, ^ + Z. c% c& L/ C4 R& m/ P: \<div id="right_content"> - I2 {. U6 E) t6 a( y</div> 3 ~+ c9 h1 d- ]7 B+ G8 f" l <div id="bottom"> 3 f& y Q% ]' z1 c</div> 1 |& v4 j [( r8 M4 n</div> & p+ L# g% f8 a* k+ t; j 在上面这段代码中大家通常会把id为left_content和right_content的float属性设为left或者right 这样两个主分栏就实现了水平排列 这里没有什么特殊的 我要说的是 大部分人会忘记给bottom加上clear（clear:both）属性 ! X3 Z- }* q! ~3 j, v5 ?; @6 l) r当然在IE里面这样做并没有什么不好 相对“智能”的IE会自动把bottom排列在上面两个div的下面 ( |2 l/ K* @5 p" n& }. [, E( O* M但是在firefox就没这么好说话了 它会严格按照float的属性来工作 因为right_content的float属性设为left或者right 7 ], [: u! F% z8 ]+ K3 n1 Z所以作为溢出的bottom会被排列在上述两个分栏的左边或者右边 + u9 {& }$ |6 ]4 h& u- Q) _3 D这样就严重影响了计划的布局 所以希望以后大家在做这种布局的时候不要忘记在水平分栏之外的div里加上clear的属性 1 v0 c2 Z: r# X$ j3 M并顺便介绍一下clear属性 引用 % m# r& J% }' r* [+ A6 _2 Mclear属性： ) b4 c# r8 Q# V, Yleft：清除左边浮动对象 right：清除右边浮动对象 0 G0 v4 N0 u6 y5 }! Aboth：两边都不允许有浮动对象 6 {# @( S& V7 @# G" S. Jnone：两边都可以有浮动对象