谈一下float和clear属性(css)

很久没写技术性的文章了 当然今天写的也不一定技术含量有多高
只是把在工作中的一些小经验和大家分享一下

大家肯定会经常用到float这个属性
因为用div布局的时候 特别是两分栏或者三分栏结构的网站
我们都需要在一个大的div下构建2或者3个布局的div
这几个div的分布就需要用float属性来实现水平排列(当然也可以不用float属性改用绝对布局)
大家通常用到的float属性一般有left和right

举个例子:
在上面这段代码中大家通常会把id为left_content和right_content的float属性设为left或者right
这样两个主分栏就实现了水平排列
这里没有什么特殊的 我要说的是 大部分人会忘记给bottom加上clear(clear:both)属性
当然在IE里面这样做并没有什么不好 相对“智能”的IE会自动把bottom排列在上面两个div的下面
但是在firefox就没这么好说话了 它会严格按照float的属性来工作
因为right_content的float属性设为left或者right
所以作为溢出的bottom会被排列在上述两个分栏的左边或者右边
这样就严重影响了计划的布局

所以希望以后大家在做这种布局的时候不要忘记在水平分栏之外的div里加上clear的属性
并顺便介绍一下clear属性

clear属性:
left:清除左边浮动对象
right:清除右边浮动对象
both:两边都不允许有浮动对象
none:两边都可以有浮动对象

Leave A Comment

Bad Behavior has blocked 949 access attempts in the last 7 days.