一、宽度与自适应
1、 浮动 float+ margin
左侧设置浮动，右侧设置margin-left（避免环绕左侧）的布局方法
<style type="text/css">
.left {
width: 200px;
float: left;
}
.right {
margin-left: 210px;
}
</style>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>
优点：容易理解，易于编写
缺点： 兼容性问题 （ IE6有3像素Bug： 当相邻的两个元素，一个是浮动的，另一个非浮动，那么在IE6 下面将会产生3像素bug。）
2、浮动 float+ margin+ (fix)
通过在html文件的right上套上一层right-fix （相当于left和right都在right-fix中）， 然后对right-fix设置浮动可以解决IE6的兼容性问题， 然后提高left的层级设置定位属性为relative。
<style type="text/css">
.left {
float: left;
width: 100px;
position: relative;
}
.right-fix {
float: right;
width: 100%;
margin-left: -100px;
}
.right {
margin-left: 120px;
}
</style>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right-fix">
<div class="right">
<p>right</p>
</div>
</div>
</div>
优点：兼容性好
缺点：结构和样式更加复杂，不利于理解
3、浮动 float+BFC(overflow)
通过overflow触发BFC（BlockFormattingContext块格式化文本）模式，内容与外界隔离，不受浮动影响（不会环绕浮动元素）。
<style type="text/css">
.left {
float: left;
width: 100px;
margin-right: 20px;
}
.right {
overflow: hidden;
}
</style>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>
优点：设置简单
缺点：兼容性问题（IE6不支持）
4、 table
table特点每列宽度之和一定是等于表宽度，所以设left，right自动填满剩下宽度。
<style type="text/css">
.parent {
display: table;
width: 100%;
}
.left,
.right {
display: table-cell;
table-layout: fixed;
// fixed：列宽由表格宽度和列宽度决定；优点1.加速table渲染；2.实现了布局优先
}
.left {
width: 100px;
padding-right: 20px;
}
</style>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>
缺点：代码较多
5、 flex
flex：1；// flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0，1，auto，后两个属性可选。
flex：1让所有弹性盒模型对象的子元素相同的长度，忽略它们内部的内容。
<style type="text/css">
.parent {
display: flex;
}
.left {
width: 100px;
margin-right: 20px;
}
.right {
flex: 1;
}
</style>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>
缺点：兼容性问题，性能问题（做一些小范围的布局）
6、position:absolute
<style type="text/css">
.content {
position: relative;
width: 100%;
height: 500px;
border: 1px solid #000;
}
.left {
background: #fcc;
width: 200px;
position: absolute;
}
.right {
background: #f66;
position: absolute;
left: 210px;
}
</style>
<div class="content">
<div class="left">
<p>Hello</p>
</div>
<div class="right">
<p>Hi</p>
</div>
</div>
二、不定宽与自适应
1、浮动float + BFC(overflow)
<style type="text/css">
.left {
float: left;
margin-right: 20px;
}
.right {
overflow: hidden;
}
</style>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>
IE6有兼容性问题
2、table
<style type="text/css">
.left {
float: left;
margin-right: 20px;
}
.right {
overflow: hidden;
}
</style>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>
3、浮动 float+BFC(overflow)
可以实现不定宽自适应布局
<style type="text/css">
.left {
float: left;
margin-right: 20px;
}
.right {
overflow: hidden;
}
.left p{
width: 200px;
}
</style>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>
网友评论