[前端]CSS的DIV归纳

确定一个父盒子，三个子盒子，父亲可能要用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代码。