所谓页面布局指的是在页面中进行大的模块划分。在大屏中布局一般有两种风格：管理系统类和网页类。
管理系统类，一般比较平实，古朴，偏实用。大部分时候是圣杯布局或其简化。网页类，一般比较艳丽、布局的变化性较大，没有一定的设计原则。无论什么样的布局风格，其技术是完全一样的。在默认情况下，页面中的所有元素都会以流的方式进行布局，称为流布局。流布局的特点是：从上到下，从左到右；元素占位，无位换行。流布局只是默认布局，这样的布局无法应用在实际项目中。项目中往往使用HTML和CSS共同作用，创建新的布局。项目中常用的布局方式主要有三种：传统布局、flex布局、grid布局。
传统布局
借助浮动、定位等手段或利用原有标签如table等实现页面的综合布局。
浮动属性
浮动属性是float，其可能的取值分别是：right、left、none。
float属性是对块级元素的设定，最早的设计目的是用于文字在图片周围的环绕显示。这种文字环线的效果主要是由于浮动元素脱离了标准文档流，使其下面的元素上移，从而占据的原来浮动元素的位置而造成的。
float:left，表示失去块级元素特征，元素自身向左浮动，直到遇上左边的其他元素，或遇到父容器为止。float:right，表示失去块级元素特征，元素自身向右浮动，直到遇上右边的其他元素，或遇到父容器为止。
清除浮动属性
clear属性是清除浮动的属性，其可能的取值分别是：right、left、both、none。
浮动后对其他元素的影响
对于其父元素来说，元素浮动之后，脱离了当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷。当兄弟元素为块级元素（非浮动），该元素会忽视浮动元素而占据它的位置，并且元素会处在浮动元素的下层（而且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。*需要注意的是：在IE6、7下则分别都有不同的表现，IE6、7中，该兄弟元素会紧跟在浮动元素的右侧，并且在IE6中两者之间留有3px的空隙。这就是著名的“IE3pxbug”。
父元素坍缩的解决办法
默认情况下块级标签的范围是由他里面的标准文档流的内容决定。浮动之后的元素是不属于标准文档流的，这时就无法撑开块级标签的高度。块级标签就变成一个没有高度的线。此所谓塌陷或坍缩。解决方法：
在所有的浮动元素后面加一个空的div元素，设置style=clear:both。该方法的适用范围更大，包括绝对定位都是可以使用该方法。在父div元素中，设置overflow:hidden，从而触发了浮动元素的父元素的BFC，使其在计算高度的时候包含浮动元素，从而防止出现高度塌陷的问题。注意：默认情况下，只有body标签具有BFC特性。可以使用overflow:hidden设置，触发其他块级标签的该种特性。
overflow属性
属性值说明visible默认值。内容不会被修剪，会呈现在盒子之外hidden内容会被修剪，并且其余内容是不可见的scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余内容（滚动条）auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
浮动布局
使用浮动布局的难点是高度自适应问题，这往需要借助JavaScript进行即时刷新操作。可以利用如下代码获取可视部分的高度。如下：
varscreenHeight=document.body.offsetHeight;
定位和布局
定位技术
position属性有如下四个属性值：
static，默认值，不使用专门的定位技术，元素跟随标准文档流定位。relative，相对定位absolute，绝对定位fixed，固定定位，一种特殊的absolute，fixed总是以body为定位对象的，按照浏览器的窗口进行定位。relative属性值1，部分的脱离的标准的文档流，其对父级容器及相邻的容器都没有影响。2，其在标准文档流中的占位依然存在。3，其定位方式是相对于其原来的在标准文档流中的位置进行定位（偏移），如果没有对某个相对定位的元素进行left、right、top、bottom定位，则该元素保持在原位置不变。4，激活了left、right、top、bottom、z-index属性。
absolute属性值
1，完全脱离标准的文档流，对其他元素的定位不会造成任何影响。此时对象不具有外边距，但仍有内边距和边框
2，其在标准文档流中的占位不再存在。
3，其定位方式是针对其也设置了relative或absolute取值的祖先容器进行定位的，如果没有这样的父容器，则针对body元素（浏览器窗口）进行定位。如果没有对某个绝对定位的元素进行left、right、top、bottom定位，则该元素保持在原位置不变。4，激活了left、right、top、bottom、z-index属性。
z-index属性，元素层次属性该属性在标准的文档流中是无效的。该属性取值整数，默认值为0。设置了position属性的值为relative和absolute的元素，可以设置该值。该属性值大的元素，位于该属性值小的元素的上方。
flex布局
FlexibleBox缩写，意为“弹性盒子”。flex布局是一维布局方式，同时在一定程度上兼顾二维。腾讯公司的