关于布局的问题，我已经转发过别人写得很好的一篇文章，我自己也写了一篇个人理解的文章，但是今天学习到w3school中有关布局的实例时，又产生了疑问，弄清楚过后想在这里进行发表，好让更多的人更好的理解。
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright W3School.com.cn
</div>
</body>首先附上源代码，这只是定了一个框架，告诉我们分成了4块内容，4个div，分别是header,nav,section,footer,这四个id名也不是乱取的，这是按照HTML5进行取名的，因为id的名称最好取得见名知意，防止以后要更改的时候不知道这个div是干什么的。
根据HTML5中的规则，这四个名称的含义为
| header | 定义文档或节的页眉 |
| nav | 定义导航链接的容器 |
| section | 定义文档中的节 |
| footer | 定义文档或节中的页脚 |
还有很多不同的命名，如果想了解的话可以去看HTML5参考手册。
根据上面的代码我们知道，一共有4个div，也就是分成了4块，我们也知道在页面上div作为块级元素，是按照普通的文档流进行排列的，即每一个div单独占一行，它们不会像内联元素那样挤在一起，可以理解为傲娇的块级元素。
在没有加样式之前，运行的样子是这样的
样式的代码为
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>加了样式过后的变化
除了颜色的变化，排版的样式也发生了变化，这些都要归功于float浮动。
为了使大家看得更加清楚，我将颜色改得对比清楚一些
这样大家可以看得更加清楚，每个div都有自己的区域，仿佛每个div就是一个矩形，而且通过观察可以看到nav和section是在同一行中，这样就说明它们不是在正常的文档流中，因为正常的文档流中它们应该是按照顺序依次排下来的。
从css代码中可以看到，我们对nav和section都采用了左浮动，对footer采用了两边消除浮动；这是我们看到的效果图，那么如果我们改变其中某些属性又会发生什么变化呢（每次做出变化时保证其他两个不变，除非特殊说明）？
1.取消nav的左浮动
如果我们取消了nav的左浮动，section和nav还是不会到同一行中，因为float属性的参考对象是它的上一个div如果上一个div在正常的文档流中，它就会与上一个div的底部进行对齐，在这个例子中就是section会和nav的底部对齐，也就是它们还是在不同的行中，效果图如下
由于这个太长了，只能分开截图了，所以中间有一行空白的地方，请忽略。这个图中section是设置了左浮动的，但是貌似没有起到作用，那是因为nav还在文档流中，而且footer设置了双边消除，所以给人的感觉就是没有起作用。
2.消除section的左浮动
消除section的左浮动，按照原理来讲，应该是nav脱离了文档流，然后section占据了它原来的位置，就会导致nav和section出现重合现象，会不会很乱七八糟呢？
结果如下：
事实证明，我们只猜对了一半，section确实是在nav的上面，但是并没有出现文本重叠的情况，而是文本统一移到了右边，环绕在nav的周围，这是因为在文本中也有一个默认的左浮动，这样就保证了文本不会重叠，有没有很神奇。
3.去掉footer的双边取消
其实footer的双边取消改成左边取消的话，效果是一样的，因为footer是最后一个div，本来就没有右浮动可以取消
我们可以看到，footer乖乖的跑到了section的右边，乍一看，还以为它们同行了，有人就会不明白了，也没有给footer设置左浮动，为什么它会跑到上面去。其实这都是假象，footer并没有跑上面去，是因为nav和section都脱离了文档流，footer就去占据了他们的位子，而文本又自带左浮动，所以这样看就像是footer跑上去了一样。
今天就解释到这儿了，如果有什么问题，欢迎讨论！