css实例教程:理解Float的含义
作者 佚名技术
来源 CSS技术
浏览
发布时间 2012-02-27
|
课程关键词：浮动 页面布局有两种方式 1）浮动Float 2）定位Position 今天就来一个小小的练习，让大家理解Float的含义 【例子】页面效果如下：
大家应该注意到了，虽然红色方块的宽度并不是100%，但是蓝色并未和红色处于同一行，这就是块状元素比较“霸道”的一点，（即使块状元素的宽度不是100%，它也不允许其他元素和他同在一行）为了消除这种“霸权”，让红色和蓝色方块都处在一行，如图
此时就需要拿出我们的利器Float！只需要在红色方块的CSS里面加上“float:left;”，这时候在IE6中可以看到蓝色方块的确跑到红色方块的后面了，并且处于一行了，但是在FireFox中却变成了如下效果：
怎么才能解决这个问题，解决这个浏览器兼容的问题，很容易，只需要在蓝色方块的CSS代码中也加入“Float:left;”，问题就解决了，加上试试，看看在FF中蓝色方块是不是和红色方块处于一行了~ 到这里，大家应该明白Float的作用了吧，就是为了消除块状元素“霸权主义”的一把利器！在布局页面的时候有时候是需要消除块状元素霸权主义才能布局好哟，比如KwooJan的博客中间内容部分，分为左边(LEFT)和右边(RIGHT)，就是要用上面这个方法布局的哟，如下图
细心的同学会注意到，在IE6中红色方块距离浏览器的左边距并不是CSS代码中定义的20像素，而是40像素，如下图：
1）要为块状元素； 2）要左侧浮动； 3）要有左外边距(margin-left)； 解决这个BUG很容易，只需要在相应的块状元素的CSS树形中加入“display:inline;”，代码如下： #redBlock{现在再看看，是不是IE6和FF显示一样了呢~ 呵呵，这节课也比较容易吧，如果大家有不明白的可以留言，我会做进一步解释。 下节课，我们讲讲“浮动清除(Clear)”问题！ 最终代码： 最终代码.rar (587 Bytes) 精简后的代码CSS加载更快，大家一看就明白了^_^ |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
你可能对下面的文章感兴趣
关于css实例教程:理解Float的含义的所有评论
