本文共 829 字，大约阅读时间需要 2 分钟。

清除浮动，主要是解决浮动与浮动之间相互干扰的问题。以下图中，第二组第一个li元素试图贴靠第一组最后一个li，原本预期的效果是li元素按照两排排列，但实际上未能实现。这一切的根本原因就藏在li的父亲div上，它没有设置高度，导致这两个div的高度均为0px。

div的高度为零意味着它没有能力撑起自身的浮动子元素，形成一个可容纳子元素的容器。浮动与浮动直接接触时，如果父容器高度没有被设置，浏览器无法为子元素预留必要的空间。此时，无法实现预期的布局效果。

在处理这一问题时，有多种方法可以尝试，比如：

方法1：给浮动元素的祖先元素加高度

这虽然有用，但通常不推荐，因为自动高度调节比固定高度更灵活。

方法2：使用 clear:both;

该属性可以清除父亲和子元素的浮动，但会导致该标签 margin属性失效，因为它无法正确计算高度差。

方法3：采用外墙法

在两个浮动元素之间添加一个div，并在这个div中使用clear: both;。同时赋予该div适当的height吗，类似于像一个"墙壁"隔离两个浮动元素。

但外墙法最大的缺陷是，添加的内墙并不能为左右浮动提供高度的支撑，动态内容无法自适应高度。

方法4：使用内墙法（最优选择）

与外墙法不同，内墙法允许父容器高度按需递增。即使不设置固定高度，也能为子内容留出合理的空间。

方法5：设置 overflow:hidden;（高推荐）

cyclesDatasets曾经的直觉发现，设置overflow:hidden;可以在不影响运算式的前提下，使子元素能够获得所需的高度。这种方法常用于快速布局解决方案，其中父容器的尺寸足够容纳子内容，且不会因为子浮动而影响整体布局。

总之，要解决浮动被干扰的问题，关键要让容器具备可信的高度。

• 指定容器的高度，可以在浏览器中复制粘贴或者通过弗拉特克斯设计工具。

• 不要允许容器宽度或高度为auto值时存在浮动元素。

• 选择最合适的清浮方式，根据具体场景平衡灵活性与特定需求。

转载地址：http://fomkk.baihongyu.com/