前端中的左右佈局實現

前端得佈局中，左右佈局是一種很常見佈局方式，下面是我在前端工做中的幾種方法：

一、float實現左右佈局

左右佈局實現的一個有效方法是利用css中的float屬性,代碼以下：

//html
 <div class="box">
   <div class="left-box"></div>
   <div class="right-box"></div>
</div>
   
//css
.box{
  width: 400px;
  height: 300px;
  background: darkgray;
}
.left-box,.right-box{
  width: 50%;
  height: 100%;
  float: left;//設置兩個盒子float:left
}
.left-box{
  background: red;
}
.right-box{
  background: green;
}
複製代碼

咱們很容易就獲得了一個左右佈局：

但這種方法也並不是完美，須要注意浮動所致使的父元素高度塌陷的問題，這就涉及要清除浮動的問題了，清除浮動的方法也有不少，我比較推薦用僞元素清除的方法。這個會單獨介紹。

二、 display: inline-block實現左右佈局

這種方法是把子元素變爲行內塊元素，從而實現元素的左右排列。

//html
 <div class="box">
    <div class="left-box"></div>
    <div class="right-box"></div>
</div>

//css
.box{
  width: 300px;
  height: 200px;
  background: darkgray;
}
.left-box,.right-box{
  width: 50%;
  height: 100%;
 display: inline-block;//子元素變爲行內塊
}
.left-box{
  background: red;
}
.right-box{
  background: green;
}
複製代碼

可是若是直接這樣寫，咱們運行後會發現並不能實現左右居中，右邊的盒子會直接掉下去，狀況以下：

這是由於block的元素inline-block化後，IE6/7沒有換行符間隙問題，其餘瀏覽器均有；inline的元素inline-block後，全部主流瀏覽器都有換行符/空格間隙問題； 即兩個inline-blockb元素中間會有空隙。形成本來在一列的元素變成兩列， 解決這種問題，只需在父元素添加font-size：0；便可解決：

.box{
  width: 300px;
  height: 200px;
  background: darkgray;
  font-size: 0;//設置字體大小爲0
}
.left-box,.right-box{
  width: 50%;
  height: 100%;
 display: inline-block;
}
.left-box{
  background: red;
}
.right-box{
  background: green;
}
複製代碼

三、 絕對定位實現左右佈局

絕對定位也是一種解決左右佈局的好方法，在父元素設置相對定位，子元素設置絕對定位：

//html
 <div class="box">
    <div class="left-box"></div>
    <div class="right-box"></div>
</div>

//css
.box{
  width: 300px;
  height: 200px;
  background: darkgray;
  position: relative;//父元素設置相對定位
}
.left-box,.right-box{
  position: absolute;//子元素絕對定位
  width: 50%;
  height: 100%;
}
.left-box{
  background: red;
}
.right-box{
  left: 50%;//設置left爲左邊盒子的寬度
  background: green;
}
複製代碼

這種實現的效果和上邊同樣，再也不附圖。

另外也有用table、float+margin實現的，table這種在早期開發中比較常見，在如今開發中基本銷聲匿跡，float+margin等實現起來比較麻煩，故不介紹。