h5学习之10(html中页面内容布局的方法流式布局，浮动布局，定位布局，弹性布局)

页面文档布局的4种方式

1.流式布局（又称自然布局）

特点：没有任何修饰的布局，野菊是元素在排版过程中，元素从上到下，从左到右的流式排列，遇到块级标签换行等

2.浮动布局（float）

http://blog.csdn.net/qq_36423639/article/details/53856500

特点：给元素设置浮动（float）属性后，元素脱离文档流，进行左右浮动，紧贴着父级元素的左右框。此浮动以按时留出来的位置，由后面的非浮动元素进行填充

3.定位布局（position）

特点：定位分为相对定位，绝对定位和固定定位，也就是给元素设置了一个位置属性，我们可以通过left,top,bottom,right四个属性来确定元素的一个排版位置

4.弹性布局（flex）

特点：它是css3提出来的一种新的布局方式，该布局的目的是提供一中更加高效的方式来对容器中的条目进行布局，对齐和分配空间

文本流与非文本流

1.什么是文本流

解释：将窗体自上而下分成一行行，并在每一行中按从左到右的顺序来进行排放元素，这个我们称之为文档流

2.什么是脱离文档流

解释：将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在进行定位

下面有三种使元素脱离文档流的属性方法

1.浮动

2.绝定定位

3.固定定位

（注意：在IE中浮动也存在与文档流中）