关于浮动(float)的原理和特性及如何清除浮动

浮动(float):

float 属性用于创建浮动框，可以向左或右移动直至包含块或另一浮动框的边缘。

语法：  选择器 { float: 属性值; }

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

1.浮动的工作原理：

浮动元素脱离文档流，不占据空间。

2.浮动的特性：

• 浮动元素会脱离标准流（脱标），即浮动的盒子不再保留原先的位置
• 浮动的元素会在一行内显示并且元素顶部对齐（除非宽度不够在一行才会换行）
• 浮动的元素会具有行内块元素的特性
• 设置了一样属性的浮动元素是紧挨着的，不会有缝隙

3.浮动的常见应用：（浮动元素经常与标准流父级搭配使用）

在绘制网页时元素通常都不贴边显示，此时可以采取的策略是：

先用标准流的父元素排列上下位置，再将内部的子元素浮动排列，如图所示

 注意：在实际应用时父盒子一般不给高度（由子盒子自己撑开），但是当父盒子中所有子元素都添加了浮动以后，由于浮动不占据原来的位置，所以父盒子高度撑不开就自动变为0，那么其他的标准流的盒子就会跑上来藏在浮动盒子的下面，这样的现象就是高度塌陷。

清除浮动（解决高度塌陷的问题）：

清除浮动的本质就是清除浮动元素造成的影响。特别地，如果父盒子本身有高度，则不需要清除浮动。

语法：  选择器 { clear: 属性值; }

属性值	描述
left	不允许左侧有浮动元素 （清除左侧浮动的影响）
right	不允许右侧有浮动元素 （清除右侧浮动的影响）
both（常用）	同时清除左右两侧浮动的影响

注意：大部分情况下都用 clear: both; 

清除浮动的策略：

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

清除浮动的方法：

1.额外标签法（隔墙法）：

在浮动元素末尾添加一个空的块级元素标签（是W3C推荐的做法），例如：

<div style="clear:both;"></div>

• 优点：通俗易懂，书写方便
• 缺点：增加额外的标签使HTML结构不够简洁

2.父级添加overflow：

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

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

3.:after 伪元素法：

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

#parent:after {
  content: "";   
  /* 伪元素是行内元素，需要转变为块元素 */
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#parent {
  /* 兼容IE6、7 */
  *zoom: 1;
}

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

4.双伪元素清除浮动：

双伪元素也是给父元素添加的。

#parent:before, #parent:after {
  content: "";
  /* 把模式转换成表格 */
  display: table;
}

#parent:after {
  clear: both;
}

#parent {
  /* 兼容IE6、7 */
  *zoom: 1;
}

• 优点：代码更简洁
• 缺点：需要照顾低版本浏览器