CSS中的浮动问题所带来的“父级坍塌”等怪异的现象也是一个让人费神的东西,今天笔者就CSS中的浮动问题进行详细的阐释,以及如何防止意外情况的发生。
一、浮动问题的产生
首先我们来看一个例子:
在浏览器中的效果是这样的:
粉色部分右边都是空白既浪费空间又不美观,我们对它进行浮动。给.box
加上float:left
属性,看一下这时候的效果:
会发现此时绿色部分跑到粉色部分下面去了,这是因为粉色部分“浮动”起来了,这叫做“脱离文档流”。而绿色部分占据了粉色部分的位置,因为粉色部分此时与绿色部分不在一个层级上,这时候绿色部分“忽视”粉色盒子的存在,绿色部分“占据文档流”。那么如何处理呢?我们可以让绿色盒子也浮动起来,让它们处在同一层级上。给.box2
也添加float:left
属性。看一下这时候的效果。
如果我们此时增加第三个盒子会怎样呢?
发现蓝色盒子此时占据了原来粉色和绿色盒子的位置。如何我们既想要粉色盒子和绿色盒子并列,又不希望其他盒子占据它们的位置该如何呢?这时候就需要“清除浮动”。
二、清除浮动
清除浮动有两种常用的方法:
1、紧接着浮动盒子的下面增加一个空标签,设置其属性为:clear:both
看一下此时的效果:
2、通过伪元素添加标签:
首先要给粉色盒子和蓝色盒子添加一个父级标签,然后对其父级标签添加伪元素:
看一下现在的效果:
这样我们就解决了浮动问题。其实解决浮动问题的方法不止这两种,不过这两种方式比较简单也比较直观,相比之下,第二种添加伪元素的方式更常用。
最后,我们来看一个由于浮动带来的“父级坍塌”现象:
(1)浮动之前
(2)浮动之后
发现父级元素只有一条“红线”显示,这就是“父级坍塌”现象。当然这个问题就可以用我们上面所讲的两种方法完美的解决。