6.4日音讯,float的透彻用法

 　　6.4日音讯,float的透彻用法。相信大家对float的用法并不陌生，因为在日常的网页制作中，它的使用频率可不低，如它的属性:left、right等就是我们用的最多的，当然了，有些网站制作者也对它有很大的抱怨，如造成网页变形，错位不协调等时有发生，其实这并不是float的"错"，而是我们大家在正常的学习和实践中并没有真正的理解它的意思有关，只要我们理解的透彻了，其实可以运用自如的。

　　今天就来一个小小的练习，让大家理解Float的含义

　　【例子】

　　要求：

　　1）两个方块，一个红色#900，一个蓝色#009；

　　2）红色方块宽度和高度均为200像素，蓝色方块

　　宽度为300像素，高度为200像素；

　　3）红色方块蓝的上外边距(margin-top)和左外边距(margin-left)均为20像素；

　　页面效果如下：

　　大家应该注意到了，虽然红色方块的宽度并不是100%，但是蓝色并未和红色处于同一行，这就是块状元素比较“霸道”的一点，（即使块状元素的宽度不是100%，它也不允许其他元素和他同在一行）为了消除这种“霸权”，让红色和蓝色方块都处在一行，如图

　　此时就需要拿出我们的利器Float！只需要在红色方块的CSS里面加上“float:left;”，这时候在IE6中可以看到蓝色方块的确跑到红色方块的后面了，并且处于一行了，但是在FireFox中却变成了如下效果：

　　这时候就需要注意了，FF中如果前面的区域浮动了，后面的那个区域很有可能就会和前面的区域发生重叠并错位。

　　怎么才能解决这个问题，解决这个浏览器兼容的问题，很容易，只需要在蓝色方块的CSS代码中也加入“Float:left;”，问题就解决了，加上试试，看看在FF中蓝色方块是不是和红色方块处于一行了~

　　到这里，大家应该明白Float的作用了吧，就是为了消除块状元素“霸权主义”的一把利器！在布局页面的时候有时候是需要消除块状元素霸权主义才能布局好哟，比如KwooJan的博客中间内容部分，分为左边(LEFT)和右边(RIGHT)，就是要用上面这个方法布局的哟，如下图

　　细心的同学会注意到，在IE6中红色方块距离浏览器的左边距并不是CSS代码中定义的20像素，而是40像素，如下图：

　　其实这是IE6的一个BUG，(IE6双倍边距BUG)，只要满足下面3个条件才会出现这个BUG:

　　1）要为块状元素；

　　2）要左侧浮动；

　　3）要有左外边距(margin-left)；

　　解决这个BUG很容易，只需要在相应的块状元素的CSS树形中加入“display:inline;”，代码如下：

　　#redBlock{

　　width:200px;

　　height:200px;

　　background:#900;

　　margin-top:20px;

　　margin-left:20px;

　　float:left;

　　display:inline;

　　}

　　Css样式实例内容，我们让文字和图片在一个固定宽度p层内，让蓝色背景文字内容居右，小图片居左。

　　案例演示最终效果图如下

　　1、首先我们设置一个最外层的宽度为300px，高度为200px的css命名为box的css选择器代码如下（知识点px是什么意思）

　　.box{width:300px;height:200px;}

　　2、设置box内的文字内容部分css样式命名为yangshi，并设置背景为蓝色，宽度为120px，居右浮动

　　.yangshi{width:120px;float:right;background:#0066FF;}

　　3、设置图片居左浮动div+css样式

　　img{float:left;}

　　4、body内的p布局，代码如下

　　我是邯郸网站制作网站，测试内容

　　说明：这里img标签是链接外部图片，图片名为demo.gif

　　最终演示结果截图

　　CSS实验二

　　接下来我们演示使用div+css让这里小图片居右（上个例子是居左），蓝色背景文字内容区居左（上个例子是居右）(扩展css居中)。这里我们只需要改变yangshi的float:right;为float:left和图片css样式img{float:left;}为img{float:right;}

　　CSS代码如下：

　　.box{width:300px;height:200px;}

　　.yangshi{width:120px;float:right;background:#0066FF;}

　　img{float:left;}

　　html中的css代码和内容不变

　　希望通过以上两个css实例对你认识float有帮助。希望大家多少实际操作实践试试！也希望大家有时间看一下CSS清除浮动

　　css浮动总结。我们要区别与文字内容靠左(text-align:left)靠右(text-align:right)样式，浮动只针对html标签设置靠左靠右浮动样式。float浮动样式没有靠中（浮动居中）的样式，如果需要让标签对象居中我们在css布局居中相关文字给大家详细讲解介绍（cssmargin）。这里记住浮动靠右使用float:right，浮动靠左使用float:left样式即可。