CSS中的浮动问题详解

CSS中的浮动问题所带来的“父级坍塌”等怪异的现象也是一个让人费神的东西，今天笔者就CSS中的浮动问题进行详细的阐释，以及如何防止意外情况的发生。

一、浮动问题的产生

首先我们来看一个例子：

在浏览器中的效果是这样的：
粉色部分右边都是空白既浪费空间又不美观，我们对它进行浮动。给.box加上float:left属性，看一下这时候的效果：

会发现此时绿色部分跑到粉色部分下面去了，这是因为粉色部分“浮动”起来了，这叫做“脱离文档流”。而绿色部分占据了粉色部分的位置，因为粉色部分此时与绿色部分不在一个层级上，这时候绿色部分“忽视”粉色盒子的存在，绿色部分“占据文档流”。那么如何处理呢？我们可以让绿色盒子也浮动起来，让它们处在同一层级上。给.box2也添加float:left属性。看一下这时候的效果。

如果我们此时增加第三个盒子会怎样呢？

发现蓝色盒子此时占据了原来粉色和绿色盒子的位置。如何我们既想要粉色盒子和绿色盒子并列，又不希望其他盒子占据它们的位置该如何呢？这时候就需要“清除浮动”。

二、清除浮动

清除浮动有两种常用的方法：

1、紧接着浮动盒子的下面增加一个空标签，设置其属性为：clear:both

看一下此时的效果：

2、通过伪元素添加标签：
首先要给粉色盒子和蓝色盒子添加一个父级标签，然后对其父级标签添加伪元素：

看一下现在的效果：

这样我们就解决了浮动问题。其实解决浮动问题的方法不止这两种，不过这两种方式比较简单也比较直观，相比之下，第二种添加伪元素的方式更常用。

最后，我们来看一个由于浮动带来的“父级坍塌”现象：
（1）浮动之前


（2）浮动之后


发现父级元素只有一条“红线”显示，这就是“父级坍塌”现象。当然这个问题就可以用我们上面所讲的两种方法完美的解决。