浮动(Float)

浮动的原始意义

在绝大多数Web开发者的语境中，“布局”这个术语和“排版”是有差别的。“布局”偏向于指宏观的GUI区域划分，好比双栏布局或三栏布局等。从这一点出发，float其实本不是一项用于“布局”的属性。float对应的实际上是传统印刷排版中图文混排中的环绕。

在 CSS 中，用 float 和 position 的区别是什么？

浮动的特性

float与block

常见元素inline,inline-block,table-cell等等设置float属性,都被视为块级元素,至关于display设置为block

Specified value	Computed value
inline-table	table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block
其它	与指定值相同

float与包裹性

若是margin-left或者margin-right的计算值为auto，它们的应用值为0

对于非替换元素,若是width的计算值为auto，应用值为“自适应（shrink-to-fit）”宽度

自适应宽度的计算与用自动表格布局算法去算一个表格单元的宽度相似。粗略地讲：经过格式化不含除显式换行外的换行来计算首选宽度（preferred width），而后计算首选最小宽度（preferred minimum width），例如，经过尝试全部可能的换行。CSS 2.1没有定义准确的算法。第三步，算出可用宽度（available width）：这种状况下，就是包含块的宽度减去margin-left，border-left-width，padding-left，padding-right，border-right-width，margin-right和全部相关滚动条的宽度的应用值

那么自适应宽度就是：min(max(首选最小宽度, 可用宽度), 首选宽度)

对于替换元素,width的应用值由行内的可替换元素决定

咱们说的包裹性,主要就是指自适应宽度,一般状况下也就是首选宽度

特定状况下（例如，见上面的10.6.4节和10.6.6节），一个创建了块格式化上下文的元素的高度按照以下规则计算：

若是它只含有行内级子级，高度就是最高的行盒的top与最低的行盒的bottom之间的距离

若是它只含有块级子级，高度由就是最高的块级子级盒的top margin-edge到最低的块级子级盒的bottom margin-edge之间的距离

此外，若是该元素含有任意bottom margin边位于元素的content边下方的的浮动后代，那么高度增长至可以包含这些边。只考虑参与此块级格式化上下文的浮动，例如，不考虑绝对定位的后代中的浮动或者其它浮动

float包裹性展现

float与兄弟元素

浮动 在浮动模型中，一个盒先根据常规流布局，而后从流中取出来尽量地左移或右移。其它内容可能会沿着浮动（盒）的一侧排列（Content may flow along the side of a float）

一个浮动盒会向左或向右移动，直到其外边（outer edge）挨到包含块边或者另外一个浮动盒的外边。若是存在行盒，浮动盒的外top（边）会与当前行盒的top（边）对齐

由于浮动（盒）不在流内，在浮动盒以前或者以后建立的未定位的（non-positioned）块盒会竖直排列，就像浮动不存在同样。然而，接着（next to）浮动（盒）建立的当前及后续行盒会进行必要的缩短，为了给浮动（盒）的margin box让出空间

浮动（盒）的内容会堆叠起来，就像浮动（盒）生成了新的层叠上下文（stacking contexts）同样，除了全部定位的元素和实际建立了新的层叠上下文并参与了浮动（盒）的父级堆叠上下文的元素。一个浮动（盒）能够与常规流中的其它盒重叠（例如，当一个常规流盒接着一个有负margin的浮动（盒）时），出现这种状况时，浮动（盒）会被渲染在未定位的（non-positioned）流内块以前，流内行内（盒）以后

float虽然使元素脱离了文档流,可是它仍然占据着位置,这也是影响外部元素宽度计算的缘由之一

float盒的兄弟块盒会竖直排列,看成float盒不存在,而兄弟行内盒会缩进,给float让出空间

对于float盒,若是它与常规流中的其它盒重叠,那么它会覆盖流内块,而且被流内行内盒覆盖

float与图文混排

一个浮动的盒与任何其它盒之间的margin不会合并（甚至一个浮动盒与它的流内子级之间也不会）

1. 一个左浮动盒的left外边（outer edge）不能位于其包含块的left边的左边。向右浮动的元素也有相似的规则
   float与左右边界

2. 若是当前盒是向左浮动的，而且在这以前源文档中还有元素生成了左浮动盒，那么对于每个以前的盒，要么 当前盒的left外边在以前的盒的right外边的右边，要么它的top要比以前的盒的bottom低。右浮动盒也有相似的规则
   float与兄弟float排列

3. 一个左浮动盒的right外边不能位于接着它的任意右浮动盒的left外边的右边。右浮动盒也有相似的规则
   float与兄弟float不能重叠

4. 一个浮动盒的外top（outer top）不能高于其包含块的top。当浮动（盒）出如今两个合并的margin之间时，浮动（盒）的定位就像它有一个空的匿名块父级存在于（当前）流同样。这个父级的位置经过margin合并章节中的规则来定义
   float与margin

5. 一个浮动盒的外top不能高于源文档中任何在此以前的元素生成的块盒或者浮动盒的外top
   float与块盒,浮动盒

6. 一个元素的浮动盒的外top不能高于任何含有源文档中在此以前的元素生成的盒的行盒的top
   float与行盒

7. 左边存在另外一个左浮动盒的左浮动盒的right外边不能位于其包含块的right边的右边（不严谨的：一个左浮动盒不能超出right边，除非它已经尽可能向左（紧挨着包含块的left边）了）。右浮动元素也有相似的规则
   多个float与包含块边界

8. 浮动盒必须尽可能高往高放（A floating box must be placed as high as possible）

9. 左浮动盒必须尽可能往左放，右浮动盒尽可能往右放。更高的位置要比更左/右的位置优先
   float与高度

因此,float自身的主要原则是:浮动元素之间不重叠；尽量向边缘漂浮，但不越界。

float与父元素

当overflow计算值为visible时常规流中的块级不可替换元素

只考虑常规流中的子级（即，浮动盒和绝对定位的盒会被忽略，而且相对定位的盒不考虑其偏移）。注意子级盒能够是一个匿名块盒

这就是float元素的父元素塌陷的缘由

float与父元素塌陷

那么,float在父元素的兄弟元素上会不会起做用呢

float与父元素的非浮动,浮动兄弟元素

这些规则里涉及的其它元素仅仅是指与浮动（盒）处于同一个块格式化上下文的其它元素

因为父元素跟它的兄弟元素同出于一个BFC中,因此行为规则与同处于同一个父元素之中的元素的规则相同：块级元素重叠；行内元素环绕；浮动元素跟随。

clear与闭合浮动

该属性说明了一个元素的盒的哪一边不能与以前的浮动盒相邻。'clear'属性不考虑元素自身的或者其它块格式化上下文中的浮动

为了解决上面的父元素高度塌陷以及父元素的兄弟元素受到子元素float影响的问题,咱们须要闭合浮动

.clearfix:before,
.clearfix:after
{
  display: table;
  content: " ";
}
.clearfix:after
{
  clear: both;
}
.clearfix{*zoom:1;} //ie 6 7

before是由于table类型能生成独立的bfc，防止上边距塌陷，

after负责清除浮动，防止父级高度塌陷；配合使用，代码少，效率高。

想要具体了解,请看一丝大大的那些年咱们一块儿清除过的浮动,这里就不详细写了

回归CSS标准之Float