超级实用的CSS布局方案之多列布局(一)

多列布局定宽+自适应1）使用float+overflow（1）原理、用法
原理：通过将左边框脱离文本流，设置右边规定当内容溢出元素框时发生的事情以达到多列布局。
用法：先将左框设置为float:left、width、margin-left，再设置实际的右框overflow:hidden。（2）代码实例
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>.left {
float:left;
width:100px;
margin-right:20px;
}.right {
overflow:hidden;
}（3）优缺点
优点:简单
缺点:不支持ie62）使用float+margin（1）原理、用法
原理：通过将左框脱离文本流，加上右框向右移动一定的距离，以达到视觉上的多列布局。
用法：先将左框设置为float:left、margin-left，再设置右框margin-left。（2）代码实例
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>.left {
float:left;
width:100px;
}.right {
margin-left:120px;
}（3）优缺点优点:简单，易理解
缺点:兼容性存在一定问题，ie6下有3px的bug。right下的p清除浮动将产生bug3）使用float+margin（改良版）（1）原理、用法
原理：在1）的基础之上，通过向右框添加一个父框，再加上设置左、右父框属性使之产生BFC以去除bug。
用法：先将左框设置为float:left、margin-left、position:relative，再设置右父框float:right、width:100%、margin-left，最后设置实际的右框margin-left。（2）代码实例
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="rigth-fix">
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</div>.left {
float:left;
width:100px;
position:relative;
}.right-fix {
float:right;
width:100%;
margin-left:-100px;
}.right {
margin-left:120px;
}（3）优缺点
优点:简单，易理解4）使用table（1）原理、用法
原理：通过将父框设置为表格，将左右边框转化为类似于同一行的td，从而达到多列布局。
用法：先将父框设置为display:table、width:100%、table-layout:fixed，再设置左右框display:table-cell，最后设置左框width、padding-right。（2）代码实例
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>.parent {
display:table;
width:100%;
table-layout:fixed;
}.left {
width:100px;
padding-right:20px;
}.right,.left {
display:table-cell; 
}（5）使用flex（1）原理、用法
原理：通过设置CSS3布局利器flex中的flex属性以达到多列布局。
用法：先将父框设置为display:flex，再设置左框flex:1，最后设置左框width、margin-right。（2）代码实例
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>.parent {
display:flex;
}.left {
width:100px;
margin-right:20px;
}.right {
flex:1;
}.parent {
display:flex;
}.left {
width:100px;
margin-right:20px;
}.right {
flex:1;
}（3）优缺点
优点:flex很强大
缺点:兼容性存在一定问题，性能存在一定问题想学习更多WEB开发前端知识，欢迎各位小伙伴们加qq群：143046757 一同探讨进步哦~