浮动的本意在大多数网页开发者的语境中，术语“布局”不同于“排版”。“布局”往往是指宏观的GUI区域划分，比如两栏布局或者三栏布局。从这个角度来看，float其实并不是“layout”的属性。浮动其实对应于传统印刷排版中图文混排中的环绕。在CSS中使用float和position有什么区别？浮动特性float和block常见元素如inline、inline-block、table-cell等设置float属性，都被视为块级元素，相当于设置显示为block指定值Computedvalueinline-tabletableinline,table-row-group,table-column,table-column-group,table-header-group,table-footer-group,table-row,table-cell,table-caption,inline-blockblock其他同指定值floatandwrappingifmargin-leftormargin-right的计算值为auto，它们的应用值为0。对于非替换元素，如果width的计算值为auto，则应用值为“shrink-to-fit”"表格布局算法类似于计算表格单元格的宽度。粗略地说：首选宽度是通过格式化没有换行符而不是显式换行符的行来计算的，然后计算首选最小宽度，例如通过尝试所有可能的换行符。CSS2.1没有定义确切的算法。第三步计算可用宽度（availablewidth）：本例中为包含块的宽度减去margin-left,border-left-width,padding-left,padding-right,border-right-width,margin-right和所有相关滚动条的宽度的应用值那么自适应宽度为：min(max(首选最小宽度,可用宽度),首选宽度)对于被替换的元素，width的应用值由行中的可替换元素。我们说Wrapping，主要是指自适应宽度，通常是首选宽度。在特定情况下（例如，见上文10.6.4和10.6.6节），建立块格式化上下文的元素的高度按如下规则计算：如果只包含内联级子元素，则高度为距离betweenthetopofthehighestlineboxandbottomofthelowestlinebox如果只包含block-levelchildren，则高度为highestblock-levelchildboxtopmargin-edgeofthelowerblock-levelchild之间的距离框和最低块级子框的底部边距边缘。此外，如果元素有任何浮动后代，其底部外边距边缘低于元素的内容边缘，则高度会增加以包含这些边。仅考虑参与此块级格式化上下文的浮动，例如，绝对定位后代中的浮动或不考虑其他包装显示浮动和兄弟元素的浮动。在浮动模型中，首先按照正常流布局一个盒子，然后从流中取出它并尽可能向左或向右移动。Othercontentmayflowalongthesideofafloat（Contentmayflowalongthesideofafloat）。浮动框将向左或向右移动，直到其外边缘接触到包含块边缘或另一个浮动框的外边缘。如果存在行框，则浮动框的外顶（边）与当前行框的顶（边）对齐。因为浮动（框）不在流中，所以在浮动框之前或之后创建的非定位（non-positioned）块框垂直对齐，就好像浮动不存在一样。但是，在float(box)旁边创建的当前和后续行框将根据需要缩短，以便为float(box)的边距框腾出空间，并且float(box)的内容将被堆叠，就像float(box)box)生成新的层叠上下文，除了所有定位元素和实际创建新层叠上下文并参与float(box)的父层叠上下文的元素。一个float(box)在regularflow中可以和其他box重叠（例如，当一个regularflowbox跟在一个float(box)后面的margin为负数），当这种情况发生时，float(box)会在定位（non-positioned)in-flow块，in-flow(box)浮动后使元素脱离文档流，但仍占据位置，这也是影响外部元素宽度计算的原因之一。浮动框的兄弟块框将垂直排列，就好像浮动框不存在一样，兄弟内联框将缩进以为浮动腾出空间。对于floatbox，如果在regularflow中与其他box重叠，会覆盖inflowblock。并且被流入内联框覆盖，浮动框和任何其他框之间的边距不会合并（甚至不会合并浮动框和它的流入子框之间）左浮动框外左边缘不能到其包含块的左边缘的左侧。向右浮动的元素对于浮动和左右边框有类似的规则。如果当前框向左浮动，并且源文档中存在在此之前生成左浮动框的元素，则对于每个前一个框，当前框的左边缘在前一个框的右边缘的右侧，或者它的顶部低于前一个盒子的底部。右浮动框有类似的规则。浮动和兄弟浮动对齐。左浮动框的右边缘不能位于任何跟随它的右浮动框的右侧。右浮动框有类似的规则，浮动和兄弟浮动不能重叠。浮动框的外层顶部（outertop）不能高于其包含块的顶部。当两个合并的边距之间出现浮动（框）时，浮动（框）的位置就好像它在（当前）流中有一个空的匿名块父级一样。这个parent的位置由marginmerge章节中的规则来定义float和margin。浮动框的外顶不能高于源文档中任何前面的元素生成的块框或浮动框float和块框的外顶，float元素的浮动框的外顶不能高于任何包含由源文档中之前的元素生成的框的行框的topfloat，并且在行框左侧有另一个左浮动框的左浮动框的右边缘不能位于其上方。在包含块的右边缘的右侧（松散地：左浮动框不能延伸到右边缘之外，除非它已经尽可能地向左（在包含块的左边缘旁边））。右浮动元素也有类似的规则。浮动框必须放置得尽可能高。浮动框必须放置得尽可能高。浮动框必须放置得尽可能高。浮动框必须放置得尽可能高。浮动框必须放置得尽可能高。浮动框必须放置得尽可能高。.与更左/右的位置相比，更高的位置优先于浮动和高度。因此，float本身的主要原则是：浮动元素之间不要重叠；尽可能漂浮到边缘，但不要越界。float和parentelements正常流中的块级不可替换元素当溢出计算值可见时，仅考虑正常流中的子元素（即忽略浮动框和绝对定位框，相对定位框不被视为其他偏移量）。注意，子框可以是匿名块框，这就是浮动元素的父元素折叠的原因。浮动且父元素折叠。那么，float会作用于父元素的兄弟元素吗？float和父元素是非浮动的，浮动的兄弟元素这些规则中涉及的其他元素只引用与float(box)在同一块格式化上下文中的其他元素由于父元素和它的兄弟元素在同一个BFC中,thebehaviorrulesareinthesame父元素内的元素规则相同：块级元素重叠；内联元素换行；浮动元素跟随。clearandclosedfloat此属性指示元素框的哪一侧不能与前一个浮动框相邻。'clear'属性不考虑元素本身或其他块格式化上下文中的浮动。为了解决父元素高度塌陷和父元素的兄弟元素受子元素浮动影响的问题，我们需要关闭float.clearfix:before,。clearfix:after{显示：表格；content:"";}.clearfix:after{clear:both;}.clearfix{*zoom:1;}//ie67before是因为table类型可以生成一个独立的bfc来防止上面的距离崩塌之后，after负责清除浮动，防止父级高度塌陷；一起使用，代码少，效率高。如果你想了解更多，请看看那些年我们一起清过的花车。这里就不详细写了。返回CSS标准的浮动
