正因为浮动功能强大，而且很有用，所以常被用作布局的技巧工具。你可能看到过图1中的情形，这是仅由两个div元素实现的，每个div中有一个浮动的图片。
图1. 那是不正确的
这可能不是作者的意图，但是考虑到所使用的样式，这是正确的布局啊。我们是这样创建的：
div.item {border: 1px solid; padding: 5px;}div.item img {float: left; margin: 5px;} 以上是所有的样式。在图1中看到的结果是因为div元素没有“拉伸”以包含住其中的浮动图片。从另外的角度来看，出现这种情况是因为浮动元素“伸出”了div元素的底部。
这不是一个bug，也不是CSS的缺陷。事实上，许多作者大部分情况下想要这种伸出的行为。仅仅在图1中显示的例子不是他们想要的。
理解问题
那什么时候作者想要浮动伸出包含元素的效果时被认为是正确的呢？很简单：从历史上看最常见的使用浮动的情况是什么。考虑下图2和生成此效果的基本标记结构。
图2. 浮动图片，流动文本
（ http://meyerweb测试数据/other/china/jul31.html穿越中国）
...text... ...text...
...text...
将流动的文本环绕在图片周围这种实践可追溯到很久以前。这就是从Netscape1.1开始将这种能力添加到Web的原因，也是CSS使用属性float使其成为可能的原因。但是再仔细看看图2。浮动图片伸出了包含它的元素。我们通过给段落添加边框可以看得更清楚，如图3所示。
图3.在段落上添加边框
所以现在我们知道了浮动元素伸出包含它们的元素为什么是重要的了。如果不伸出，图2将是图4的样子。
图4. 如果浮动元素扩展它们的父元素
这将是设计者不能够接受的。所以，为了保留Web设计的传统和作者的期望，CSS被设计成允许浮动元素伸出包含它们的元素的底部。虽然这对于一般的文本流是必须的，但主要问题出现在把浮动用于布局用途的时候。
清除解决方案
如果浮动被用在非表格布局中，那么需要某种方式让包含它们的元素拉伸以包含住它们。目前，需要一点结构性的hack。既然我们要在包含元素的底部放一个元素来清除以前浮动的底部，clear是我们的答案。我们仅需要在容器结束之前插入一个块级元素，并清除浮动。考虑：
Widget 6144
$39.95查看更多关于ContainingFloats包含浮动_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did105375