三列浮动布局的核心

/*三列定位布局*/

div#main {
    margin: 0 30% 0 20%; 
    padding: 0px;
}

div#left {
    float: right;
    width: 25%;
}

div#right {
   float: left;
   width: 15%;
}


/*三列浮动布局*/

div#main{
  margin: 0 25% 0 20%; 
  padding: 0px;
}

div#right{
  position: absolute;
  right: 0;
  width: 20%;
}

div#left{
  position: absolute;
  left: 0;
  width: 15%;
}

浮动布局和定位布局的差别

中间列的外边距对左右两边的宽度之间的关系是密切的

定位布局：定位的元素可以放在任何地方。

浮动布局：浮动的元素依赖于它前面的元素。

定位元素下面可以放任何东西，但是浮动元素下面不可以放置其它元素的文字，文字只能环绕着浮动元素，但是背景可以延申到浮动元素下面。