原理说明：

• 主面板设置宽度为100%，主面板和两个侧栏都设置浮动，常见为左浮动，这个两个侧栏会被主面板挤下去，通过设置负边距将浮动的侧栏拉上来，左侧栏的负边距为100%，刚好是窗口的宽度，因此会从主面板下面的左边跑到与主面板对齐的左边，右侧栏此时浮动在主面板下面的左边，设置负边距为负的自身宽度刚好浮动到主面板对齐的右边。
• 为了避免侧栏遮挡主面板内容，在外层设置左右padding值为左右侧栏的宽度，给侧栏腾出空间，此时主面板的宽度减小。由于侧栏的负边距是相对主面板的，所以两个侧栏并不会像我们理想中的停靠在左右两边，而是跟着缩小的主面板一起向中间靠拢，此时使用相对布局，调整两个侧栏到相应的位置。

html

<div class="container">
  <div class="main"></div>
  <div class="sub"></div>
  <div class="extra"></div>
</div>

布局步骤：

1. 三者都设置向左浮动
2. 设置main宽度为100%，设置两侧栏的宽度
3. 设置负边距，sub为负左边距为100%，extra设置负左边距为自身宽度
4. 设置main的padding值为左右两个面板留出空间
5. 设置两个侧栏为相对定位，sub的left值为负的sub宽度，extra的right值为负的extra宽度

css

.container{
padding:0 230px 0 190px;
}
.main{
float:left;
width:100%;
}
.sub{
float:left;
width:190px;
margin-left:-100%;
position:relative;
left:-190px;
}
.extra{
float:left;
width:230px;
margin-left:-230px;
position:relative;
right:-230px;
}

ps:DOM元素的书写顺序不得更改

end

一盏灯， 一片昏黄； 一简书， 一杯淡茶。 守着那一份淡定， 品读属于自己的寂寞。 保持淡定， 才能欣赏到最美丽的风景！ 保持淡定， 人生从此不再寂寞。