float和定位以及页面布局

浏览遇到浮动元素时，会把它尽可能放在最左边或者右边，还会从流中删除这个段落，就好像它浮在页面上一样。

页面中的块级元素会在浮动元素的下面，而对于内联元素定位时，他们会考虑浮动元素的边界，因此会围绕浮动元素。

而绝对定位时，其他元素甚至不知道有这样的
4000
元素，他们会将它完全忽略，流元素中的其他内联元素也不会围绕在绝对定位的元素周围，也无法清除浮动。

流体布局（liquid layouts）：不论我们将浏览器调整多大宽度，布局都会扩展，填满整个浏览器

冻结布局（frozen layouts）:给容器加一个固定的宽度，避免由于窗口扩展带来的很多问题。

凝胶布局（jello layouts）将冻结布局的的内容固定在页面中间，在冻结布局的基础上增加margin o auto；完成。

 前端页面的布局方式常用到的大概有三种方式分别为普通文档流布局、浮动布局和绝对布局。下面将分别介绍着三类布局。

　　a、普通布局：前端中用到的标签主要分为块级标签（display：blcok）和行级标签(display:inline)。块级标签为必须占一行的标签元素，后面的元素必须在下一行显示；行级标签是显示时后面的行级元素紧跟着前一个行级标签显示。普通布局是在按照这些元素的特性进行界面的布局，从左到右，从上到下的顺序进行。另：普通元素的position为static。

　　b、浮动布局：浮动布局包括左右浮动，即相对于普通布局，该布局元素会脱离普通布局也是流布局，相当于浮动元素会在普通布局之上进行界面的布局，会导致的问题就是会有普通布局的部分被浮动布局元素给遮挡，解决办法为清除浮动，即在被遮挡的普通元素上添加clear：both进行浮动的清除，使得普通布局的元素不会跟浮动元素在一行显示并另起一行进行dom文档的渲染，清除浮动还有其他办法请自行查询。另：浮动布局中浮动的范围是根据父元素的位置进行浮动位置定位。

　　c、绝对布局：常用的position为absolute时的元素会进行绝对布局。绝对定位的参考位置为其祖先元素中position为非static的第一个元素。所以一般将参考位置元素设置为position：relative。