div布局

<div class="header"></div>
<div class="nav"></div>
<div class="content">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>

有了html5语义化标签后，可以这样布局

<header></header>
<nav></nav>
<div></div>
<footer></footer>

div 布局中如果使用了浮动，那么必须清浮动，方法：

1. 给父元素设置height

2. 内墙法，在父元素内加一个div，设置clear:both;

3. 给父元素添加伪元素after {content:''; display: block; clear: both} 父元素{zoom:1}

4. overflow: hidden | auto