1. 使用BFC的原理實現
BFC的規則之一，就是BFC區域，不會與float box重疊，因此我們可以利用這一點來實現3列布局。
html代碼如下

XML/HTML Code復制內容到剪貼板

<div class="left"></div>  
<div class="right"></div>  
<div class="main"></div>  

css代碼如下

CSS Code復制內容到剪貼板

.left {   
  float: left;   
  margin-right: 10px;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
}   
.rightright {   
  float: rightright;   
  margin-left: 10px;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
}   
.main {   
  height: 100px;   
  background-color: green;   
  overflow: hidden;   
}  

2.雙飛翼布局
這種布局方案最早由淘寶提出，主要為了主列能夠被最先加載。
實現原理：
（1）讓主列外面添加一個wrap，主列wrap，以及2子列都左浮動。
（2）設置主列wrap寬度為100%，將子列的margin-left設置為負值，讓子列能夠排列在左右兩側。
（3）這是主列的margin-left與margin-right比左右兩列的寬度大一點，則可以設置出來主列與子列之間的間隙。
html代碼如下

XML/HTML Code復制內容到剪貼板

<div class="wrap">  
  <div class="main-content">  
    <div class="main"></div>  
  </div>  
  <div class="left"></div>  
  <div class="right"></div>  
</div>  

css代碼如下

CSS Code復制內容到剪貼板

.wrap {   
  width: 100%;   
}   
.wrap::after {   
  display: block;   
  content: ”;   
  font-size: 0;   
  height: 0;   
  clear: both;   
  zoom: 1;   
}   
.main-content {   
  float: left;   
  width: 100%;   
}   
.main {