CSS 浮动

一、标准流（normal flow）

　　标准流又称为文档流，普通流。

　　标准流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思。比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。

二、浮动（float）

　　浮动最早是用来控制图片的，以便达到其他元素（特别是文字）实现 “环绕”图片的效果。

　　其实浮动还有一个功能：就是让任何盒子可以一行排列，慢慢地就用浮动的特性开始布局了。

　　1、浮动是什么

　　　　元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

　　　　通过 float  属性来定义浮动，语法格式：

选择器 {float:属性值;}

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

　　

　　2、浮动的内幕特性

　　　　特性：浮动脱离标准流，不占位置，会影响标准流，浮动只有左右浮动。

　　　　a、浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。 

　　　　

　　　　b、浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

　　　　

　　　　　 一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。

　　　　元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。

　　　　总结：

• • • 　　浮动的元素盒子是漂浮起来的，漂浮在其他标准流盒子上面。
      
    •        浮动的盒子不占有位置，如果有没有浮动的元素为占有它原来的位置。
    •        首先浮动的盒子需要和标准流的父级搭配使用，浮动可以使元素显示模式体现为行内块特性。（对于行元素来说，可以直接设置宽高。）

　　3、常见的浮动布局

　　　　a、一列固定宽度且居中

　　　　　　

　　　　b、两列左窄右宽型

　　　　　　

　　　　c、通栏平均分布型