HTML 布局 — 使用 ＜div＞ 元素之清除浮动

demo 场景：

使用 div 元素对页面进行上中下布局，页面整体宽度为 500px ；中间部分高度为 200px ，设置为左浮动；顶部和底部在高度上没有特殊的要求。

---

问题描述：

顶部和底部都没有设置浮动，且底部的 div 在没有清除浮动（即 clear:both;）的情况下也可以进行正常的布局，因此思考清除浮动的具体作用。

页面底部的代码：

<div id="foot" style="background-color: tomato; text-align: center;">
	版权 © chengnan.com
</div>

效果如下：

---

原因分析：

自己写的代码虽然没有清除浮动而且正常布局，是因为在最外面的 div 给定了宽度为 500px，并且浮动的两个元素的宽度加起来正好满足 500px，因此将底部的 div 挤到了新的一行，而不是浮动不起作用，所以才能看到正常的布局页面。

当把最外面的 div 的宽度调到更大的时候，以 600px 为例，这时候如果没有设置清除浮动所产生的页面效果如下：

此时可以看到底部的 div 有一部分移动上去了，并且移动上去的这一部分的宽度正好是 100px，而且文字也是以 600px 为标准进行居中的。如果此时将底部的样式中加上清除浮动的代码：

<div id="foot" style="background-color: tomato; text-align: center; clear: both;">
	版权 © chengnan.com
</div>

产生新的页面效果如下：

由上图可以看出来，添加清除浮动之后底部的 div 不论上面有多大的空间都不会移动上去。

---

解决方案：

建议添加上清除浮动的代码，以免造成页面布局的混乱。