話不多說，直接上源碼，源碼內有解析
aa.JPG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3 column</title>
<style>
body{ text-align: center; }
h2{ background-color: teal; text-align: center; padding: 10px; }
i{ color: purple; }
.row1{ background-color: #a6e1ec; }
.row1 .left{ float: left; width: 200px; height: 200px; background-color: #a94442; }
.row1 .center{ min-height: 100px; margin: 0 200px; background-color: #aaaaaa; padding: 0 20px; }
.row1 .center:after{ /* 消除內部元素浮動引起的高度塌陷，保證父元素高度為子元素最高的高度 */ content: ''; display: table; clear: both; }
.row1 .right{ float: right; width: 200px; height: 200px; background-color: aquamarine; }
.row2{ background-color: #a6e1ec; overflow: hidden; /* BFC -- 消除內部元素浮動引起的高度塌陷 */ padding: 0 200px; }
.row2 .left{ float: left; width: 200px; height: 200px; background-color: #a94442; margin-left: -100%; position: relative; left: -200px; }
.row2 .center{ float: left; width: 100%; min-height: 100px; background-color: #aaaaaa; }
.row2 .right{ float: left; width: 200px; height: 200px; background-color: aquamarine; margin-left: -200px; position:relative; right:-200px; }
.row3{ background-color: #a6e1ec; overflow: hidden; /* BFC -- 消除內部元素浮動引起的高度塌陷 */ }
.row3 .left{ float: left; width: 200px; height: 200px; background-color: #a94442; margin-left: -100%; }
.row3 .center{ float: left; width: 100%; min-height: 100px; background-color: #aaaaaa; }
.row3 .center .inner{ margin: 0 200px; }
.row3 .right{ float: left; width: 200px; height: 200px; background-color: aquamarine; margin-left: -200px; }
.row4{ background-color: #a6e1ec; overflow: hidden; width: 100%; } .row4 .left{ float: left; width: 33.33%; background-color: #a94442; } .row4 .center{ float: left; width: 33.33%; background-color: #aaaaaa; } .row4 .right{ float: left; width: 33.33%; background-color: aquamarine; }
</style>
</head>
<body>
<h2>三欄布局之自由浮動</h2>
<div class="row1">
<div class="left">左側</div>
<div class="right">右側</div>
<div class="center">
<h3>自由浮動三欄方案主要關鍵點</h3>
<p>1、左右側邊浮動，中間正常流</p>
<p>2、左側左浮動，右側右浮動</p>
<p>3、左右側元素放<i>前</i>，中間元素放<i>后</i></p>
<p>4、清除浮動引起的高度塌陷，本例采用給中間欄添加:after偽類CSS清除</p>
</div>
</div>
<h2>三欄布局之圣杯</h2>
<div class="row2"> <div class="center">
<h3>圣杯布局方案主要關鍵點</h3>
<p>1、三欄均浮動</p>
<p><i>2、父元素左右內補padding對應左右側欄寬度</i></p>
<p><i>3、左右側元素relatice相對定位，左側左偏移（left: -XXXpx;），右側右偏移（left: -XXX0px;）</i></p>
<p>4、左右側元素負值margin-left，左側margin-left: <i>-100%</i>(使得元素上移到上一行的行首)，右側margin-left: <i>-自身寬度</i></p>
<p>5、中間元素放<i>前</i>，左右側元素放<i>后</i></p>
<p>6、清除浮動引起的高度塌陷，本例采用給父元素添加overflow:hidden類CSS清除</p>
</div>
<div class="left">左側</div>
<div class="right">右側</div>
</div>
<h2>三欄布局之雙飛翼</h2>
<div class="row3">
<div class="center">
<div class="inner">
<h3>雙飛翼布局方案主要關鍵點</h3>
<p>1、三欄均浮動</p>
<p><i>2、中間欄需額外添加一個子元素</i></p>
<p><i>3、中間欄width:100%，其子元素的左右margin對應左右側欄寬度</i></p>
<p>4、左右側元素負值margin-left，左側margin-left: <i>-100%</i>(使得元素上移到上一行的行首)，右側margin-left: <i>-自身寬度</i></p>
<p>5、中間元素放<i>前</i>，左右側元素放<i>后</i></p>
<p>6、清除浮動引起的高度塌陷，本例采用給父元素添加overflow:hidden類CSS清除</p>
</div>
</div>
<div class="left">左側</div>
<div class="right">右側</div>
</div>
<h2>三欄布局之百分比</h2>
<div class="row4">
<div class="left">左側33.33%</div>
<div class="center">中間33.33%</div>
<div class="right">右側33.33%</div>
</div>
</body>
</html>
