目前，我的理解来看，如果能搞懂大多数布局思想，并能很熟练的在页面中使用他们，我想就能开发出很复杂的页面，并且写起来更加事半功倍！所以这篇文章记录一下我在写页面的过程中常用的到的布局，并作一个我自己的理解的概述，有不对的地方，希望后期通过不断的开发实践来补充错误知识点！在这篇文章我将记录float布局、position布局、百分比布局、em布局等等，这里布局理解是搭建复杂网页布局的基础！
我想大家对float布局的记忆应该很深刻了，比如我刚开始接触web的时候,就经常学写一些网页导航菜单的代码，导航都是横向有很多菜单的，一般的布局思想就是float布局了。比如下面一个很简单的导航代码html和css。
<ul>
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
<style type="text/css">
ul{
display:block;
list-style:none;
width:300px;
margin:20px auto;
}
ul li{
float:left;
width:100px;
text-align:center;
font:14px "microsoft yahei";
line-height:30px;
color:#fff;
background-color:#c00;
margin:0px;
}
</style>
上面简单几句样式，就能利用float布局实现一个简单的导航!那怎么理解float布局呢！其实很简单，原本html布局是从上到下、从左到右的布局的！float布局把dom按一个流的方向依次渲染html，比如有四个div，它们样式大概是长宽各位100px，背景为红色，float为left。那么这样的样式用过之后，我们发现四个div依次向左排列，如下图：
float布局有它自己独特的特点，我分别总结了下，有如下几点：
1、float布局是不占据页面的实际面积的，比如上面的代码，我们发现ul除了有margin之外，它的内容面积却是0。你可以理解为float布局在页面中是飘在页面上的，所以不占据实际页面面积。那怎么解决这个问题呢！当然可以利用清除float就可以轻松解决问题了，关于清除float，我后面会详细说！
2、利用float布局可以清除dom之间的任何空白换行符，比如有一个父元素div，宽度为800px,在它下面有四个子div，宽度都为200px,高度为200px,我们设置它们的display为inline-block,可是我们发现一个问题，无论我们怎么设置它们之间的margin，这四个div总不能放在同一行，它们之间总有间隙，这是为什么呢？因为它们之间有空白语意换行符，我们可以把这个四个div中间的换行符统统去掉来达到解决问题的目的，但显然这样做，很不灵活，而且也不方便，代码量很大的话，这样做是很没有意义的。但是如果这里使用float布局，就可以完全忽略这些问题了，因为采用float布局元素不是普通的元素，他们是浮动的，不占据面积，他们只会按一个方向依次排放。其实，这有一个更加明显的好处，便于你精确数字化计算盒子间的间距，因为都不会考虑到中间存在的空白换行符等问题。
3、因为float布局的元素不是常规的dom元素，所以以往一些用在常规元素上的样式是无效的，比如text-align:center、vertical-align:middle等等，这些特点可以通过长期实践理解到！
利用float布局你完全可以搭建很复杂的页面，也会写一些特殊样式，比如文字环绕图片等等！那我们在来说说清除float！
使用float布局，如果不清除一下float，那么我们的页面将会出现一些意外情况，比如布局变乱等。ok！我将举一个变乱的例子，看一张图，我们需要用代码把它写出来。
介于这样的需求用float布局会方便的多，所以给出如下代码，读者可自行把代码复制下来测试。（注：此处未清除float）
html:
<div class="parentDiv">
<div class="child childDiv1">
div1
</div>
<div class="child childDiv2">
div2
</div>
</div>
css
<style type="text/css">
.parentDiv{
width:1000px;
padding:10px;
background-color:#f20956;
text-align:center;
color:#fff;
margin:30px auto;
}
.child{
width:100px;
height:100px;
background-color:#247aee;
}
.childDiv1{
float:left;
}
.childDiv2{
float:right;
}
</style>
上面的代码经测试效果如下图：（点击可查看大图）
从图中看出，父div并没有被撑开，这是为什么呢？因为已经说过了，采用float布局的元素实际不占据页面空间。为了让父div正常被子div撑开，我们需要清除float，这里，我演示一种方法，我们在父div的尾部加一个空的div，并令其样式为clear:both，如此上面的代码变成了如下，读者可复制测试：
html:
<div class="parentDiv">
<div class="child childDiv1">
div1
</div>
<div class="child childDiv2">
div2
</div>
<div style="clear:both;"></div>
</div>
css
<style type="text/css">
.parentDiv{
width:1000px;
padding:10px;
background-color:#f20956;
text-align:center;
color:#fff;
margin:30px auto;
}
.child{
width:100px;
height:100px;
background-color:#247aee;
}
.childDiv1{
float:left;
}
.childDiv2{
float:right;
}
</style>
如此，我们看见如下正常的效果：（点击可查看大图）
为什么清除了float之后页面就正常了呢！可以这样理解，采用了float布局让元素不占据页面空间，但在清除float之后，使元素保持float布局的特点，但又让它回归到正常的元素。就好像inline元素被设置成为inline-block元素之后，它就兼有两种特点了！还有上面的加的那个空元素一定要div吗？不一定，其实你完全可以使用其它任意元素，只不过div在用户代理那里默认是以块状呈现的，这样做有一个好处，就是保证新加的空元素不影响原来的布局，因为块元素默认是单独成一行的！
好了，让我们回归正题，对于怎么清除float，我们常见方法作几点说明：
1、使用overflow:hidden。在上面的代码中，你只需要给父元素设置这样一个属性，那么就会清除内容所有的子元素float。这样做简单粗暴，但是这种方法有个不好的地方，因为它会截断内容，这在有一些时候，我们想写一些特殊效果很不方便，比如，我们写了一个按钮，它虽然在内部，可是我们使用了定位或者补丁，使它跑到div外面，这里如果使用这种方法，就会令按钮看不见，从而在它上面的一些逻辑什么的也会随之不见！
2、就是在元素尾部加一个空的元素用于清除元素内部的float。这种方法我们在前面的文章使用的就是，这种方法简单、兼容性较好、而且对页面布局影响也很小。但是也有一个坏处，如果你的页面中有很多地方需要清除float，那么采用这种方法，你不得不在很多地方加载一些无意义、空节点，这无疑是没有意义的！兼容性是我最想使用它的原因！
3、令元素本身也是float。这种方法的思想是把元素本身也设置为float布局的，最后在页面的尾部统一加一个空元素清除float。我在开发中很少使用这种方法，因为现代的页面在写的过程中，多多少少会采用一些其它一些布局方法，所以采用这种方法经常忘记在需要清除float的地方清除float。所以因人而异，你喜欢你也是可以用的！
4、这种方法是用利用css伪类:after来实现。其实这种方法思想是跟第二种方法是一样的，只不过采用了css的方式，我们都知道，利用伪类:after可以在元素尾部加一下东西，所以我也可以加清除float的内容，常见使用这种方法清除float的代码如下：
:after{
content:'';
display:block;
clear:both;
overflow:hidden;
visibility:hidden;
height:0px;;
}
记住使用伪类:after的时候一定要用content属性，我来解释一下上面的代码，设置display为block，主要是不影响原来的布局，另外height为0px也是为了让新加的元素不占据空间，其他一些属性同理。这种方法使用起来是最方便的，因为你可以在任何时候清除float，甚至不用去修改html页面。我目前想到的他的问题应该就是兼容性问题吧 ，因为这个选择器是属于css3的，也就是说可能老版本的浏览器兼容性会出现问题，其实现在看来，这个问题完全可以忽略了，因为现代浏览器都支持了，即便少数浏览器不支持，你也可以根据实际生产需要，放弃老版本浏览器的兼容问题了！
总的来说，使用float布局，你完全可以精确定义你们页面的布局了！
position布局能让你的页面自适应窗口的大小。让你的页面布局更灵活、控制力更强，比如看下面的一个需求图：（点击可查看大图）
要实现上面的布局，可以采用如下的代码:(读者可以复制代码测试)
<div class="parentDiv">
<div class="leftDiv childDiv">leftDiv</div>
<div class="centerDiv childDiv">我的宽度自适应</div>
<div class="rightDiv childDiv">rightDiv</div>
</div>
<style type="text/css">
div{
font-size:14px;
text-align:center;
line-height:100px;
color:#fff;
}
.parentDiv{
padding:8px;
position:relative;
background-color:#f20956;
margin:30px auto;
max-width:1200px;
}
.childDiv{
height:100px;
z-index:99;
}
.leftDiv,.rightDiv{
width:100px;
top:8px;
background-color:#f3eb10;
position:absolute;
}
.leftDiv{
left:8px;
}
.rightDiv{
right:8px;
}
.centerDiv{
display:block;
margin:0px 110px;
background-color:#3611f1;
}
</style>
上面的代码在浏览器效果如下，在大尺寸下观看，如下图：（点击可放大观看）
再缩小一下浏览器尺寸大小，效果如下图：（点击可放大光看）
position布局的的position属性值可以取static、relative、position及fixed。下面分别来说明一下！
1、static。static是默认值，默认定位方式，即采用浏览器默认的从上到下。从左右到右的定位方式，注意采用此定位的元素是占据页面实际空间的！此时，如果对元素设置left、right、bottom、top等值是无效的！
2、relative。这个是相对定位，怎么理解？其实就是说元素相对于元素在浏览器中默认的流的位置。采用此定位的元素是占据页面空间的！如果此时对元素设置了left、right、top、bottom等值，那么元素将会相对于元素本来的位置进行偏移，但注意，元素仍然占据原来的空间。
3、absolute。这个是绝对定位，即此时对元素设置了left、right、top、bottom等值后，元素将会去目标位置，记住，此时元素是不占据页面空间的，利用absolute定位，可以实现许多复杂、多重叠的页面。absolute定位的元素的left、right、top、bottom等值是相对于也设置非static定位的祖先元素，如果祖先元素都未设置定位，那么默认相对于文档，也就是整个页面。
4、fixed。fixed定位是相对于浏览器当前的可见窗口来说的，利用fixed定位可以设置一直浮在窗口上的页面效果。
理解了这四种定位之后，那我说下我在什么地方需要用到这些东西！一般要写一些有弹窗效果的页面，那么就可以使用fixed定位，而使用的最多的就是absolute定位了，其用意就是一些常见的页面都有类似的效果：某个元素固定在某个块的固定位置，其他内容任意变换都不会影响它，比如上面的示例代码，两边的小div是分别固定在大div的两边的！我发现在实际的开发过程中，这种需求会有很多，尤其在响应式布局开发中！还有幻灯片、轮播图等等效果中，都会常用到absolute定位!absolute定位经常和relative配合使用，可以实现很多灵活的页面布局！
顾名思义，百分比布局就是让页面的元素的长宽按一定的百分比例占据页面，比如如果设置父Div设置了宽度为800px,那么如果给子div设置宽度为25%，它的宽度就是200px；如果给子div设置宽度为50%，它的宽度就是400px;如果给子DIV设置宽度为100%，它的宽度刚好是父Div的宽度800px。百分比布局常常集合float布局实现一些网格风格的页面。
理解em布局的关键是理解em的概念，什么是em呢？它是一个长度单位，它描述的尺寸大小就是当前元素设置的字体大小，或者说祖先级元素设置的字体大小，比如一个元素设置了字体大小为14px,那么5em就是5个字的大小，即70px。em是一个相对单位，1em总是等于当前元素设置的字体大小或祖先级元素显示设置的大小。还有一种单位rem，其实rem跟em是一样的，都是同一个单位，只是相对的元素不同，rem总是相对于根级元素，在html中指的是html或者body，而em则是相对于任意显性设置字体大小的祖先级元素或者元素自身。使用em布局你可以实现在祖先级元素上改变字体大小，从而整体缩放页面的弹性布局。
这种布局，说实话我现在用的少，所以也不是很熟悉，所以后面将会把这一块的内容补上！