1. 问题的出现

在学习布局有关的 float 属性时，发现了 float 属性在使用时出现的 2 个问题。问题如下：
Q1：如果一个元素中只包含了浮动元素，且未为该元素设置高度，其浮动元素并不会把该元素的高度撑开，会默认它的高度为 0。

Q2: float 属性会使元素脱离正常文档流，但是元素的文本内容还是会占用该位置。

可以看见示例中为第一个元素设置浮动并取消颜色之后，其他元素当它不存在一样按照正常文本流的方式进行布局，但是第一个元素的内容将第二个元素的内容挤了下去，导致第二元素与第三元素的内容相互重叠。

2. 原因

Reason for Q1 —— float 属性会使元素脱离正常文档流，并不会占据文档流的位置。如果一个元素中只包含了浮动元素，浮动元素的高度并不能赋予该元素，所以该元素的高度会「坍塌」。

Reason for Q2 —— CSS 的 float 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。使用 float 会使元素脱离正常的文档流，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。

3. 解决方法

Way for Q1 具体如下：
① 给父元素添加一个名为 clearfix 的 class 类，并进行以下CSS设置。

② 为父元素添加 overflow: hidden; 或者 overflow: auto; 规则触发 BFC（块级格式化上下文），而计算 BFC 的高度时，浮动元素也参与计算。
③ 可以将父元素也设置 float 属性，将其也变成浮动元素。
④ 显式地为父元素添加高度，但是并不是一种合适的方法。

Way for Q2 —— 在浮动元素之后的元素设置 clear: left; 规则以清除左边浮动。