CSS清除浮动：深入解析原理与应用技巧，解决布局难题

浮动布局（float layout）是CSS中一种常用的布局技术，它允许元素脱离正常的文档流，并按照指定的方向（左或右）进行排列。浮动布局在创建多列布局、图片排列等场景中非常有用。然而，浮动布局也会带来一些问题，如父元素高度塌陷、浮动元素覆盖等。为了解决这些问题，我们需要使用清除浮动（clear float）的技术。
浮动布局的原理
浮动布局的核心是通过设置元素的
float
属性，使其脱离文档流，并向左或向右浮动。浮动元素会尽量排列在一行内，如果容器宽度不够，浮动元素会自动换行排列。
创建多列布局
通过将多个元素都设置为浮动，可以在一行内创建多列布局。例如，以下代码创建了一个两列布局：

图片排列
浮动布局常用于图片排列，可以让图片自动适应容器宽度并实现流动的效果。

这是一些文本，图片会根据文本内容自动排列。

清除浮动的原因
父元素高度塌陷
在非IE浏览器（如Firefox）下，当容器的高度为
auto
，且容器的内容中有浮动（
float
为
left
或
right
）的元素时，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出。
浮动元素覆盖
浮动元素可能会覆盖其他非浮动元素，导致布局混乱。
清除浮动的方法
方法一：使用带
clear
属性的空元素
在浮动元素后使用一个空元素（如

），并在CSS中赋予
.clear
clear:both;
属性即可清理浮动。

方法二：使用CSS的
overflow
属性
给浮动元素的容器添加
overflow:hidden;
或
overflow:auto;
可以清除浮动，另外在IE6中还需要触发
hasLayout
，例如为父元素设置容器宽高或设置
zoom:1
。

方法三：使用CSS的
:after
伪元素
结合
:after
伪元素和IE hack，可以完美兼容当前