两列布局

两列布局：一般情况下是指定宽与自适应布局，两列中左边是确定的宽度，右列是自动填满剩余所有空间的一种布局效果

    <div class="left">左：定宽</div>
    <div class="right">右：自适应</div>

方案一：float + margin

.left,.right{
   height:300px;
}
.left{
   width:300px;
   background:#c9394a;
   float:left;
}

.right{
   height:300px;
   background:#ccc;
   margin-left:300px;
}

优点：实现方式简单

缺点：

1.自适应元素margin属性值与定宽元素的width属性值保持一致

2.定宽元素浮动与自适应元素不浮动导致浏览器兼容性不好,老的浏览器两个元素之间存在空白区域

3.如果定宽元素里有子元素，子元素清除浮动会影响整个布局

<div class="right">
    <div style="clear:both"></div>
</div>

优化方案

<div class="left">左：定宽</div>
<!--为自适应元素定位父级元素-->
<div class="right-fix">
    <div class="right">右：自适应</div>
</div>

.left,.right{
   height:300px;
}
.left{
   width:300px;
   background:#c9394a;
   float:left;
   
   position:relative;
}
.right-fix{
   float:right;
   width:100%;
   margin-left:-300px;
}
.right{
   background:#ccc;
  
}

 

方案二：float + overflow

.left,.right{
   height:300px;
}
.left{
   width:300px;
   background:#c9394a;
   float:left;
  
}

.right{
   background:#ccc;
   overflow:hidden;/*开启BFC模式*/
}

缺点：overflow属性不仅解决了两列布局问题，同时设置了内容溢出的情况

方案三：display属性的table相关值使用

<div class="parent">
    <div class="left">左：定宽</div>
    <div class="right">右：自适应</div>
</div> 

.parent{
   display:table;
   table-layout:fixed;/*设置表格布局算法*/
   width:100%;
}

.left,.right{
   height:300px;
   display:table-cell;
}

.left{
   width:300px;
   float:left;
   background:red;
}

.right{
   background:green;
 
}

优点：浏览器兼容性比较好

缺点：将所有元素的display属性设置为table相关值，受到相应制约