有这样一种情形：在一个容器（container）中，有两个浮动的子元素，如图一。

（图一 设计视图是一个父容器中含有二个浮动的子元素）

请问HTML代码应该怎么写？

很简单啦，几行字就够了。

上面的代码完全正确，但是如果在浏览器中一运行，就会出现意想不到的结果。

（图二 实际视图是子元素显示在父容器的外部）

两者好像脱离了关系一样，怎么会这样？

2. 问题的原因

其实，原因很简单，与浮动定位有关。

在CSS规范中，浮动定位不属于正常的页面流（page flow），是独立定位的。所以，只含有浮动元素的父容器，在显示时不考虑子元素的位置，就当它们不存在一样。这就造成了显示出来，父容器好像空容器一样。

3. 解决方法一：添加空元素

经典的解决方法，就是在浮动元素下方添加一个非浮动元素，就像图三。

（图三 在父容器底部添加一个非浮动元素）

代码这样写：

这样一来，就没问题，能够正常显示了。原理是父容器现在必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素都包括进去了。

这种方法比较简单，但是要在页面中增加冗余标签，违背了语义网的原则。那么，有没有不修改HTML代码的方法呢？

4. 解决方法二：浮动的父容器

另一种思路是，索性将父容器也改成浮动定位，这样它就可以带着子元素一起浮动了。

代码这样写：

这种方法不用修改HTML代码，但是缺点在于父容器变成浮动以后，会影响到后面元素的定位，而且有时候，父容器是定位死的，无法变成浮动。