三种基本布局模型

三种基本的布局模型

1. 流动模型（flow）
2. 浮动模型（float）
3. 层模型（layer）

一、流动模型（flow）

• 网页的默认布局模式
  两个典型特征：

1. 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置
2. 内联元素(a、span、em、strong...)都会在所处的包含元素内从左到右水平分布显示。

二、浮动模型（float）

想让两个块状元素并排显示，设置元素浮动

任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。

div{  
  width:200px;  
  height:200px;  
  border:2px red solid;  
  float:right;  
}

三、层模型（layer）

图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作。

CSS定义了一组定位（positioning）属性来支持层布局模型。