CSS中Float和Clear属性的使用

踏浪行歌

大家肯定会经常用到float这个属性 因为用div布局的时候 特别是两分栏或者三分栏结构的网站 我们都需要在一个大的div下构建2或者3个布局的div 这几个div的分布就需要用float属性来实现水平排列（当然也可以不用float属性改用绝对布局） ( Y0 P( s6 K. z# A) k- R# y" C大家通常用到的float属性一般有left和right ) j2 ^! v" L7 P# K0 _举个例子： 引用 <div> ; b% j2 C. x+ X- ^9 Z( k<div id="left_content"> </div> : |: k4 }( M$ \' n% J2 J<div id="right_content"> % ^- t% b) G3 A# v</div> * a' @9 u- e/ G* E# ]0 g<div id="bottom"> 9 K4 [& B. @" A: u8 f</div> % Z, n5 R. G4 E8 e6 f; M: t. V8 f</div> : L0 C) {+ ~6 L3 ?# A- \; b在上面这段代码中大家通常会把id为left_content和right_content的float属性设为left或者right 这样两个主分栏就实现了水平排列 / b1 l. e4 `1 Y这里没有什么特殊的 我要说的是 大部分人会忘记给bottom加上clear（clear:both）属性 当然在IE里面这样做并没有什么不好 相对“智能”的IE会自动把bottom排列在上面两个div的下面 但是在firefox就没这么好说话了 它会严格按照float的属性来工作 ) g' T+ l' E! Q: O, r0 k# g3 H因为right_content的float属性设为left或者right 3 f6 X% o, @% ~4 n" Y: g所以作为溢出的bottom会被排列在上述两个分栏的左边或者右边 * T4 [% l+ s \0 R W$ U3 O( g这样就严重影响了计划的布局 " Z5 m2 K. j: }, D 所以希望以后大家在做这种布局的时候不要忘记在水平分栏之外的div里加上clear的属性 - [, r! @% E" e1 m并顺便介绍一下clear属性 引用 clear属性： ) x- R7 z$ ]: P6 x+ P% h$ zleft：清除左边浮动对象 right：清除右边浮动对象 both：两边都不允许有浮动对象 none：两边都可以有浮动对象