当前位置: 首页 > 前端技术 > 正文

CSS浮动(Float)

页面布局有两种方式

1)浮动Float

2)定位Position

今天就通过一个小小的练习,通过引导的方式,理解Float的含义。

【例子】

要求:

1)两个方块,一个红色red,一个蓝色blue;

2)红色方块宽度和高度均为200像素,蓝色方块 宽度为300像素,高度为200像素;

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

CSS浮动(Float)

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

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

CSS浮动(Float)

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

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

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

IE6双倍边距BUG

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

1)要为块状元素;

2)要左侧浮动;

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

解决这个BUG很容易,只需要在相应的块状元素的CSS属性中加入“display:inline;”,现在再看看,是不是IE6和FireFox显示一样了呢~

代码如下:

[css]
.div1{display:inline;float:left;margin-top:20px;margin-left:20px;background:red; width:200px; height:200px;}
.div2{ float:left; margin-top:20px;margin-left:20px;background:blue; width:300px; height:200px;}
[/css]

CSS浮动(Float):等您来吐槽!