1.一列布局
html:
<div class="header"></div><div class="body"></div><div class="footer"></div>
css:
?????.header{ ???????height: 100px; ???????background: pink; ???} ???.body{ ???????height:500px; ???????background: blue; ???} ???.footer{ ???????height:100px; ???????background: #ddd; ???}2.双飞翼布局（中间自适应，左右列固定宽度）
html:
???<div class="main"> ???<div class="cont"></div> ???</div> ???<div class="left"></div> ???<div class="right"></div>
css:
??????.main { ???float: left; ???width: 100%; ???height: 500px;}.cont { ???height: 500px; ???background-color: aqua; ???margin-left: 300px; ???margin-right: 300px;}.left { ???float: left; ???width: 300px; ???height: 500px; ???margin-left: -100%; ???background-color: pink;}.right { ???float: left; ???width: 300px; ???height: 500px; ???margin-left: -300px; ???background-color: yellow;}
css常用布局
原文地址：https://www.cnblogs.com/yewook/p/8456596.html