确定一个父盒子，三个子盒子，父亲可能要用relative包裹
<div class="father">
<div id="c1">子盒子一</div>
<div id="c2">子盒子二</div>
<div id="c3">子盒子三</div>
</div>.father{
width: 800px;
height: 200px;
background-color: #000099;
position: relative;
}
.father div{
width: 200px;
height: 100px;
}
#c1{
background-color: #666666;
}
#c2{
background-color: #dd7155;
}
#c3{
background-color: aquamarine;
}
父盒子自适应子盒子
去掉父盒子的高度
.father{
width: 800px;
background-color: #000099;
position: relative;
}
.father div{
width: 200px;
height: 100px;
}
#c1{
background-color: #666666;
}
#c2{
background-color: #dd7155;
}
#c3{
background-color: aquamarine;
}
使用float后父元素如果没有设定高度，就会高度坍塌
.father div{
width: 200px;
height: 100px;
float: left;
}
子div添加float后父盒子高度自适应
父盒子添加overfloat属性（清除浮动了）
.father{
width: 800px;
background-color: #000099;
position: relative;
overflow: auto;
}
.father div{
width: 200px;
height: 100px;
float: left;
}
#c1{
background-color: #666666;
}
#c2{
background-color: #dd7155;
}
#c3{
background-color: aquamarine;
}父盒子有高度 子div的float，隐藏溢出
.father{
height: 50px;
width: 800px;
background-color: #000099;
position: relative;
overflow: hidden;
}
.father div{
width: 200px;
height: 100px;
float: left;
}子盒子absolute 其他元素坍塌
所以绝对定位会脱离文档流，父元素如果没有高度，就会失去高度
.father {
width: 800px;
height: 400px;
background-color: #000099;
position: relative;
}
.father div {
height: 100px;
position: absolute;
}
#c1 {
width: 300px;
background-color: #ff9769;
}
#c2 {
width: 120px;
background-color: #dd7155;
}
#c3 {
width: 250px;
background-color: aquamarine;
}出现了层叠，盒子3在最上面了（觉得绝对定位和float不能兼得？）
其他
一旦给元素加上absolute或float就相当于给元素加上了display:block;。什么意思呢？比如内联元素span默认宽度是自适应的，你给其加上width是不起作用的。要想width定宽，你需要将span设成display:block。但如果你给span加上absolute或float，那span的display属性自动就变成block，就可以指定width了。因此如果看到CSS里absolute/float和display:block同时出现，那display:block就是多余的CSS代码。