题外话：心情不好想虐虐自己。
两栏布局要求说明：左侧固定宽度，右侧自适应大小
HTML文档结构如下：
<body>
<div class="outer">
<div calss="inner left">这是左边</div>
<div class="inner right">这是右边</div>
</div>
</body>实现效果：
方法如下：
方法一：float。left将元素的float属性设置为left
body{
margin:0;
padding:0;
/*height:100%;*/
background:#DCDCDC;
}
.left{
width:500px;
height:500px;
background:#ADFF2F;
float:left;
}
.right{
/*height:100%;*/ /*高度自适应*/
/*margin-left:500px;*/
height:300px;
background:#FF69B4;
} margin:0;
padding:0;
/*height:100%;*/
background:#DCDCDC;
}
.left{
width:500px;
height:500px;
background:#ADFF2F;
float:left;
}
.right{
/*height:100%;*/ /*高度自适应*/
/*margin-left:500px;*/
height:300px;
background:#FF69B4;
}方法二：float+margin-left。设置左元素float属性为left，有元素的margin-left为左元素的width
body{
margin:0;
padding:0;
background:#DCDCDC;
}
.left{
width:500px;
height:500px;
background:#ADFF2F;
float:left;
}
.right{
height:300px;
margin-left:500px;
background:#FF69B4;
}方法三：float+overflow：hidden。左元素float属性设置为left，右元素overflow属性设置为hidden
body{
margin:0;
padding:0;
background:#DCDCDC;
}
.left{
width:500px;
height:500px;
background:#ADFF2F;
float:left;
}
.right{
height:300px;
overflow:hidden;
background:#FF69B4;
}方法四：padding+绝对定位。左元素position属性设置为absolute，右元素padding-left设置为左元素的width：
body{
margin:0;
padding:0;
background:#DCDCDC;
}
.left{
width:500px;
height:500px;
background:#ADFF2F;
position:absolute;
}
.right{
height:300px;
padding-left:500px;
background:#FF69B4;
} }
.right{
height:300px;
padding-left:500px;
background:#FF69B4;
}
总结：
（1）上述大部分的方法都是创建BFC来解决问题的。在BFC中，每个盒子的左外边框紧挨着包含块的右边框。当我们给右侧的元素单独创建一个BFC时，它将不会紧贴在包含块的左边框，而是紧贴在左元素的右边框。
（2）创建BFC的方法：
a.float属性不为none
b.position属性为绝对属性absolute或fixed
c.overflow属性不为visible
d.display属性为inline-block，table-caption，flex，inline-flex
817
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
