CSS 浮动

标签按照默认的方式排列，我们叫做标准流（也叫普通流、文档流）。

比如块状元素会独占一行，从上到下顺序排列，而行内元素会按照顺序从左到右排列，碰到父元素的边缘则自动换行。

标准流是最基本的布局方式。 但有很多的布局效果，仅仅用标准流是没有办法完成的，此时可以用浮动完成布局，因为 浮动可以改变元素标签默认的排列方式，最典型的应用：可以让多个块级元素一行内排列显示。

div { 
  float: none;         /*元素不浮动（默认值）*/
  float: left;         /*元素向左浮动*/
  float: right;        /*元素向右浮动*/
}

1、浮动特性

1.1 浮动元素会脱离标准流（脱标）

设置了浮动的元素，脱离了标准流的控制，不再保留原来的位置。

1.2 浮动的元素会一行内显示并且元素顶部对齐

如果多个盒子都设置了浮动，他们会按照属性值在一行内显示并且顶端对齐，即使各个盒子大小不一样。

如果父元素一行内装不下多个盒子，多出的盒子会另起一行对齐。

1.3 浮动的元素具有行内块元素的特性

任何元素都可以设置浮动，不管原来是块级元素、行内元素还是行内块元素。设置浮动后，元素可以获得行内块元素的特性。

• 如果 行内元素设置为浮动，不需要模式转换就可以给元素设置宽度和高度。
• 如果 块级盒子 没有设置宽度，默认宽度和父级是一样的，在设置浮动后，其大小根据内容来决定
• 浮动的元素和行内块元素的区别：浮动的盒子是互相挨在一起的，没有缝隙。

2、浮动布局注意点

2.1 浮动和标准流的父盒子搭配

在布局过程中，我们先用标准流的父元素排列上下位置，之后内部子元素采用浮动排列左右位置。

子元素可以先设置尺寸，然后再排列位置。

2.2 一个元素浮动了，理论上其余的兄弟元素也要浮动

一个盒子设置为浮动后，会影响浮动盒子后面的标准流（因为浮动元素会脱标）。如果一个盒子中有多个盒子，如果其中的一个盒子浮动，那么其他兄弟元素也应该浮动。

3、清除浮动

由于父级盒子很多情况下，不方便给高度（比如一些购物网站的商品页，商品数量不是一定的，父盒子的高度也是不一定的），但子盒子浮动又不占有位置，最后的结果就是父级盒子高度为 0，会影响下面的标准盒子。

这个时候我们就需要 清除浮动。清除浮动不是让元素不浮动，清楚浮动的 实质是清除浮动元素造成的影响。

如果父盒子本身有高度，就不需要清除浮动。清除浮动后，父级会根据浮动的子盒子自动检测高度。 父级有了高度，就不会影响后面的标准流了。

div {
  clear: left;        /*不允许左侧有浮动元素（清除左浮元素影响）*/
  clear: right;       /*不允许右侧有浮动元素（清除右浮元素影响）*/
  clear: both;        /*同时清除左右两侧浮动的影响（实际工作中，几乎只用这个）*/
}

清除浮动的策略是闭合浮动。只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。

3.1 清除浮动 —— 额外标签法

额外标签法也称为隔墙法。

额外标签法会在浮动元素末尾添加一个空的标签【要求这个标签必须是块级元素】。例如 <div style="clear: both"></div>， 或者 <br/>。

优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签，结构化较差。

3.2 清除浮动 —— 父级添加 overflow

可以给父级添加 overflow 属性，将其设置为 hidden、auto 或 scroll。

优点：代码简洁
缺点： 无法显示溢出的部分。

3.3 清除浮动 —— :after 伪元素法

额外标签法的升级版，也是给父元素添加

.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* IE6、7 专有 */
.clearfix {
  *zoom: 1;
}

优点：没有增加标签，结构简单
缺点：照顾低版本浏览器。

3.4 清除浮动 —— 双伪元素清除浮动

同样给父元素增加

.clearfix:before, .clearfix:after {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}
/* IE6、7 专有 */
.clearfix {
  *zoom: 1;
}

优点：没有增加标签，结构简单
缺点：照顾低版本浏览器。