前端-----浮动

简单聊一下浮动

一、什么是浮动

为了让排版更加简单，或者满足一些特殊的排版模式，由于传统position排版模式太烦，所以使用浮动，即：

float：left/right… 菜鸟网站

二、浮动的特点

 1、脱离标准流,简称脱标
 2、浮动的盒子不再保留原先的位置
 3、给多个盒子添加浮动,会让它们排列成一排顶端对齐

浮动注意点：

1、第一个不浮动，第二个不浮动,则他不会压住上一个标准流盒子,会压住下一个标准流盒子
2、浮动盒子只会影响盒子后面的标准流，不会影响前面的标准流

浮动为了某些排版方式提供了更加便捷的方法，例如：

三、清除浮动，为什么要清除浮动

为什么要清除浮动
	1、父元素没高度
	2、子盒子浮动了
    3、影响下面标准流盒子布局了

清除浮动的方法	优点	缺点
添加额外标签	通俗易懂，方便书写	添加许多无意义的标签
父元素添加：overflow属性	书写简单	溢出隐藏
父元素添加：after元素	结构语义化正确	IE6-7不支持
父元素添加：双伪元素	结构语义化正确	IE6-7不支持

下面看展示就ok了：

清除浮动后的效果：