上中下一栏
布局
<header id="top" class="wrap">顶</header>
<section id="middle" class="wrap">主体</section>
<footer id="bottom" class="wrap">底</footer>
样式
body{margin: 0;}
.wrap{width: 820px;margin: 0 auto;}
#top{height: 160px;background-color: aqua;}
#middle{height: 320px;background-color: khaki;}
#bottom{height: 120px;background-color: lawngreen;}
左右两栏
纯浮动
.clearfix{*zoom:1; margin: 0 auto; width: 810px;}
.clearfix:after{content: "xiaoweiba";display: block; clear: both;}
.wrap{height: 760px;float: left;}
#left{width: 210px;background-color: lightgreen;}
#right{width: 600px;background-color: pink;}
</style>
</head>
<body>
<section id="box" class="clearfix">
<aside id="left" class="wrap">左</aside>
<div id="right" class="wrap">右-纯浮动式</div>
</section>
定位
#box{width: 900px;height: 720px; margin: 0 auto;position: relative;}
#left{height: 720px;width: 220px; position: absolute;left: 0;top: 0;background-color: salmon;}
#right{height: 720px;width: 680px; position: absolute;left: 220px;top: 0;background-color: yellow;}
</style>
</head>
<body>
<div id="box">
<aside id="left"></aside>
<section id="right">定位方式实现左右两栏布局</section>
</div>
浮动加普通流
/* #wrap{width: 900px;margin: 0 auto;} */
#wrap{width: 88%;margin: 0 auto;}
#left{width: 220px;float: left;background-color: plum;height: 700px;}
#right{background-color: royalblue;height: 700px;margin-left: 220px;}
</style>
</head>
<body>
<div id="wrap">
<aside id="left">左边</aside>
<section id="right">浮动加普通流 实现左右两栏布局<br>当父级宽度给定百分比时，右边宽度可实现跟随屏幕自适应</section>
</div>
左右两栏加页眉页脚
.wrap{width: 780px;margin: 0 auto;}
#top{height: 80px;background-color: tomato;}
#bottom{height: 120px;background-color: goldenrod;}
#middle{height: 520px;overflow: hidden;}
#left{float: left;width:180px;height:520px;background-color:grey;}
#right{float: left;width: 600px;height: 100%; background-color: hotpink;}
</style>
</head>
<body>
<header id="top" class="wrap"></header>
<section id="middle" class="wrap">
<aside id="left"></aside>
<div id="right">左右两栏加页眉页脚<br>等于<br>上中下加上左右两栏</div>
</section>
<footer id="bottom" class="wrap"></footer>
左中右三栏-左右浮动中间自适应宽度
#wrap{width: 90%;margin:0 auto;}
#left{width: 180px;height: 480px;float: left;background-color: wheat;}
#right{width: 180px;height: 480px;float: right;background-color: palegreen;}
#middle{margin: 0 190px;height: 480px;background-color: purple;}
</style>
</head>
<body>
<div id="wrap">
<aside id="left"></aside>
<aside id="right"></aside>
<section id="middle">左右浮动，中间自适应-middle放最后因为浮动元素脱离文档流不占用高度，middle可以上去</section>
</div>
左中右三栏-双飞翼
body{margin: 0;}
#wrap{margin: 0 auto;width: 90%;}
#main{width: 100%;float: left; background-color: purple;}
.content{height: 500px;margin: 0 202px;}
#left{width: 200px;height: 500px;float: left; background-color: mediumaquamarine;margin-left: -100%;}
#right{width: 200px;height: 500px;float: left;background-color: mediumaquamarine;margin-left: -200px;}
</style>
</head>
<body>
<div id="wrap">
<section id="main">
<div class="content">#content-双飞翼布局为何这样写？</div>
</section>
<aside id="left">#left</aside>
<aside id="right">#right</aside>
</div>
左中右三栏加页眉页脚
/* .wrap{margin: 0 auto;width: 900px;} */
.wrap{margin: 0 auto;width: 90%;}
#top,#bottom{height: 100px;background-color: mediumturquoise;}
#middle{height: 520px;}
#main{width: 100%;float: left; background-color: violet;}
.content{height: 520px;margin: 0 200px;}
#left{width: 200px;height: inherit; float: left;background-color: teal;margin-left: -100%;}
#right{width: 200px;height:inherit;float: left;background-color: yellowgreen;margin-left: -200px;}
</style>
</head>
<body>
<header id="top" class="wrap">上</header>
<section id="middle" class="wrap">
<div id="main">
<div class="content">#content</div>
</div>
<aside id="left">左边</aside>
<aside id="right">右边</aside>
</section>
<footer id="bottom" class="wrap">下</footer>
