小记css中float浮动问题
2012-08-09 15:45
267 查看
脱离了tabel布局的时代,div+css的布局使我们的网站更加灵活易用,但是发现初学者总是不约而同的犯同样的错误,且有些还屡犯不改,呵呵,我想大约与我一样,很多时候做事情只追求“解决”,而没有研究其本质。 这篇博客记录下我的经验,欢迎指教。
我今天想讲一下浮动的问题。
看上面这张图片,这种排列的布局是再常见不过了,固定宽度,固定高度,向左浮动就解决了。但是,这个设计中内容的多少是可变的,这就意味着如果这些块中的一些内容比其他的多,就会破坏这个布局。
因为这种排列的整体性非常重要,我一边会采取非常简单的方法,超过隐藏:overflow:hidden; 当然如果是多行文字,这时你要设定元素的line-height属性,好确定它的高度正好显示多少行文字。如果是单行,这在我前面总结的前端开发经验中有提到的,加上white-space:nowrap; text-overflow:ellipsis;属性。
当然,最上面我放的图片很明显的就能发现它的布局混乱原因,但是如果是相差几px的图片就不那么容易被发现了。所以,在css布局中,我们经常遇到一个忘记清除浮动的问题,像刚刚那个例子,如果文字都刚好2行,布局做好后,如果不清除浮动,其实很难发现,但是之后跟着排列的标签,根据浏览器不同,又可能发生兼容性的问题了。
还有一个容易发生的浮动兼容性问题,有些刚接触的孩子,会出现这种情况:
给leftdiv写了float:left; 之后的rightdiv却没有写float。这种写法在很多浏览器是支持的,因为外面有个div的宽度限制,所以rightdiv自动就跟着左边的div浮动了,然而在火狐浏览器缺失不行的,rightdiv会毫不留情的掉下来。
另一个浮动的例子:
遇到不知道文字长度的图文混排,一般的做法是这样的:在一个div中,把图片float:right;然后文字就环绕着图片混排了。
介绍一篇文章:跨浏览器的inline-blockhttp://www.qianduan.net/cross-browser-inline-block.html 以上内容部分引入此文字资料,谢谢作者精彩翻译。
我今天想讲一下浮动的问题。
看上面这张图片,这种排列的布局是再常见不过了,固定宽度,固定高度,向左浮动就解决了。但是,这个设计中内容的多少是可变的,这就意味着如果这些块中的一些内容比其他的多,就会破坏这个布局。
因为这种排列的整体性非常重要,我一边会采取非常简单的方法,超过隐藏:overflow:hidden; 当然如果是多行文字,这时你要设定元素的line-height属性,好确定它的高度正好显示多少行文字。如果是单行,这在我前面总结的前端开发经验中有提到的,加上white-space:nowrap; text-overflow:ellipsis;属性。
当然,最上面我放的图片很明显的就能发现它的布局混乱原因,但是如果是相差几px的图片就不那么容易被发现了。所以,在css布局中,我们经常遇到一个忘记清除浮动的问题,像刚刚那个例子,如果文字都刚好2行,布局做好后,如果不清除浮动,其实很难发现,但是之后跟着排列的标签,根据浏览器不同,又可能发生兼容性的问题了。
还有一个容易发生的浮动兼容性问题,有些刚接触的孩子,会出现这种情况:
给leftdiv写了float:left; 之后的rightdiv却没有写float。这种写法在很多浏览器是支持的,因为外面有个div的宽度限制,所以rightdiv自动就跟着左边的div浮动了,然而在火狐浏览器缺失不行的,rightdiv会毫不留情的掉下来。
另一个浮动的例子:
遇到不知道文字长度的图文混排,一般的做法是这样的:在一个div中,把图片float:right;然后文字就环绕着图片混排了。
介绍一篇文章:跨浏览器的inline-blockhttp://www.qianduan.net/cross-browser-inline-block.html 以上内容部分引入此文字资料,谢谢作者精彩翻译。
相关文章推荐
- css中float浮动问题(2)
- 解决子级用css float浮动,而父级div不能自适应高度问题
- CSS中float造成的浮动“塌陷”问题的解决办法
- css禁止float浮动元素自动换行/定位问题
- CSS常规布局解决float右浮动换行超出的问题
- CSS float 浮动问题
- css中float浮动问题(1)
- css清除浮动float的三种方法总结。为什么清浮动?浮动会有那些影响?
- 一天搞定CSS: 浮动(float)与inline-block的区别--11
- CSS的position与float的问题
- 解决CSS中float:right后右对齐换行问题
- div+css基础——4.div浮动引发的问题
- overflow解决float浮动后高度自适应问题
- css多个div浮动float高度自适应(自增)
- css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')
- css之position,float浮动叠加大总结
- css清除浮动float的几种方法
- CSS float浮动属性
- 解决子级用css float浮动 而父级div没高度不能自适应高度
- CSS学习(5)--float浮动元素、元素的定位和堆叠、以及css文件的验证