标签：

CSS的三种构造机制 普通流（标准流）

普通流中主要分为两个板块，一个是块级元素，一个是行内元素

块级元素

块级元素的特点就是独有一行，从上到下挨次摆列

块级元素：div、hr、p、h1~h6、ul、ol、dl、form、table、...

行内元素

行内袁术会凭据挨次从左到右的挨次摆列，直到父元素的宽度不敷会换行

行内元素：span、a、i、em、...

浮动：Float

让盒子从普通流中浮起来,主要感化让多个块级盒子一行显示。

我们知道想让独有一行的块级元素像行内元素那样在一排中有序的摆列有两种方法

第一种display: inline-block，转换为行内块元素，但是有个缺陷就是每个行内块元素之间城市有空白间隙

第二种就是我们此刻要说的浮动，

浮动的特点

脱标 ：脱离标准流，浮于标准流的上面

不占位置：浮动的元素是不会占用标准流的位置的，也就是说当一个盒子浮动了之后，其下的空间会被其他标准流元素占用，位于浮动元素下面

转变display属性：float属性会转变元素display属性，任何元素都可以浮动。浮动元素会生成一个块级框， 生成的块级框和我们前面的行内块极其相似。但是是紧密贴在一起的，不会像行内快那样有间隙。在定位后面统一详细说明。

浮动的应用

一般我们的网页的构造就是标准流 + 浮动 + 定位完成的

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

因为浮动脱标，所以我们一般会给浮动的元素添加一个父级标准流盒子，这样可以制止浮动的元素影响其他的标准流元素

断根浮动

首先说说断根浮动的运用场景

在很多情况下，我们的父级盒子可能是固定设置高度的，是需要其内子元素的高度叠起来撑起父盒子的高度的，如果此时我们的子盒子都使用了浮动，不占有父级标准流元素的高度，那么父盒子的高度就不会被撑高，高度就会为0。就影响了父盒子下面的标准流盒子，我们得断根由于浮动带来的这种影响，所以这里说成断根浮动

归根到底一句话

断根浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。断根浮动之后， 父级就会按照浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

断根浮动的几种方法

第一种

选择器{clear:属性值;} 属性值描述
left   不允许左侧有浮动元素（断根左侧浮动的影响）  
right   不允许右侧有浮动元素（断根右侧浮动的影响）  
both   同时断根摆布两侧浮动的影响  

但是我们实际事情中， 几乎只用 clear: both;

第一种的行内表示模式

//是W3C保举的做法是通过在浮动元素末尾添加一个空的标签例如
style=”clear:both”></div>

第二种：给父级添加overflow属性要领

overflow为 hidden| auto| scroll

第三种 使用after伪元素断根浮动

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

第四种：使用双伪元素断根浮动

.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
} 定位：position

将盒子定在某一个位置 自由的漂浮在其他盒子(包孕标准流和浮动)的上面 即尾定位

定位的构成

定位由两部分构成：定位模式 + 边偏移