浮动造成的高度塌陷问题

浮动可以解决一些很古怪的间隔问题，但是浮动也可能造成父盒子的高度塌陷问题。

首先明确，什么是高度塌陷。

我们先来看一个显示正常的情况：

这段代码是设置了父盒子的高度的情况下，显示如下：

当然有时候的场景里，我们不知道父元素的高度会是多少，就先不设置。当我们删除上段代码中给父元素设置的高度后，显示如下：

我们发现父元素的高度变成了0，本来应该在下面的啦啦啦啦也上来了，而且在元素检查中我们还会发现这个啦啦啦啦啦啦啦元素是会占据一整行的（当然文字是肯定跟div隔开来的）。这是因为子元素脱离了文档流，父元素也没有设置高度，认为自己高度为0。