053288628280
您的当前位置:首页 > 技术支持 > 建站知识 >

css中float的用法

时间:2017-08-21

页面design中,用CSS控制布局时float与clear属性的运用至关重要,一定要理解清楚。下面用我自己摸索和网络上整理的内容加以总结。
第一,必须要明白两件事:
1 .浏览器事按照HTML代码中对象声明的先后顺序,以流布局的方式来显示对象的.
2.HTML中的所有对象几乎都默认分为两种: block对象和in-line对象. 其中, block默认的显示状态是占据整行; in-line对象则相反,允许

其他对象与它在一行中显示.   而float属性, 它的作用就是改变block对象的默认显示方式. block对象设置了float属性之后,它将不再独

自占据一行.

 

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

引用

<div>
<div id="left_content"></div>
<div id="right_content"></div>
<div id="bottom"></div>
</div>

 

在上面这段代码中大家通常会把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:两边都可以有浮动对象


相关文章

Copyright © 2009-2017 千龙网络 版权所有  鲁ICP备09004053号 TAG SITEMAP