<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>浮动布局</title><style type="text/css">*{margin: 0;padding: 0;}header{height: 150px;background: yellow;}nav{height: 30px;background: green;}.main{width: 1000px;background: red;/*height: 500px;*/margin: 0 auto;overflow: hidden;}/*两列/三列布局*/.left{width: 200px;height: 300px;background: blue;/*display: inline-block;*/float:left; /*脱离文档流 的布局方式*/}.right{width: 800px;height: 500px;background: pink;float: left;/*display: inline-block;vertical-align: top;*/}footer{height: 100px;background: gold;}/*多行多列布局*/.box{width: 240px;height: 100px;border: 1px black solid;float: left;margin: 10px;/*box-sizing: border-box;*/}</style></head><body><header></header><nav></nav><div class="main"><div class="left"></div><div class="right"><div class="content"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div></div></div><footer></footer></body>
</html>
![bzoj 4573: [Zjoi2016]大森林](http://pic.xiahunao.cn/bzoj 4573: [Zjoi2016]大森林)
