下面的示例页面：CSSfloatingfloat相关的第一个解决方案示例mobile终端浏览浮动的目的浮动设计的初衷是为了实现文字环绕效果。在一些教程中，浮动的介绍并没有强调这一点，而是讲如何使用这个属性来实现一些所谓的“有趣”的效果。虽然扩展了思路，但感觉不太合适。浮动的介绍W3C文档说的很简洁：这个属性指定一个框向左浮动，向右浮动或者不浮动。以下是提取的基本特征。价值：左|对|无|inheritInitial:none适用于:all,butsee9.7Inherited:no以下是相关说明和一些注意事项。重要的认知浮动从正常文档流中移除元素，从正常文档流中移除。然后向左或向右平移，移动直到碰到它所在容器的边界，或碰到另一个浮动元素。left值的作用：元素会生成一个块级的框向左浮动，正常的文档流从这个框的右上方开始。right：与left属性值类似，只是元素生成的块级框向右浮动，正常的文档流会从这个框的左侧和顶部开始。none：盒子没有浮动。display、position、float的关系我多次看到有人把这些属性写在一起，感觉自己是抱着试错的心态写CSS的。以下情况的示例页面：显示、位置和浮动之间的示例关系。精力有限，只是在规则应用下尝试了一些有价值的情况。这三个属性影响框的生成和布局，它们的相互影响有如下顺序规则：如果display属性的值为none，那么position和float属性将不会被应用。这种情况不会生成框。否则，如果position的指定值为absolute或fixed，则盒子将被绝对定位，float的计算值为none，显示的取值规则如下表所示。框的位置取决于top、right、bottom、left属性和框的包含块。否则，如果float指定一个非none的值，则框会浮动，显示取值规则如下表所示。否则，如果该元素为根元素，则显示值规则如下表所示。但是，在CSS2.2中有一个例外，当指定为list-item的值成为block或list-item的计算值时，其值是未定义的。否则，将按指定应用剩余的显示属性值。指定值计算值inline-tabletableinline,table-row-group,table-column,table-column-group,table-header-group,table-footer-group,table-row,table-cell,table-caption,inline-blockblockotherssameasspecified从上面的规则可以看出，把这些属性写在一起有时候是行不通的。对于不熟悉它的人来说，这可能会造成不必要的混淆。FloatingConstraintRules约束规则有很多，但是在实践中遇到的情况没有那么多。我觉得需要注意三点：浮动元素的包含块是它最近的块级父元素；包含块Block浮动元素的边界是指内容区域的边界；多个浮动元素之间的交互。有关详细信息，请参见此处。如果后面在实践中遇到相关情况，这里需要补充一下。浮动的问题就是大家熟知的父元素高度塌陷问题，这是可以想象的，因为它脱离了文档流。要解决这个问题，有2个参数：clearfloat和closefloat。看完这篇文章，我觉得很有道理。解决高崩问题，清浮只是方法之一。称封闭浮动更为恰当和严谨。关闭float的方法方法一：使用属性clear样式属性clear结构变成如下"clear-fix">