0904css基本布局浮动基础

实例

<span>1. 实例演示如何消除子元素浮动造成父元素高度折叠的影响</span>
<div class="box1">
    <div class="box2">子元素</div>
    <div class="clearn"></div>
</div>
<div>
    1.设置父级高度
    不适用.如果子元素高度变化后父级高度也需要跟随修改变化
</div>
<div>
2.父级浮动
    不适用.如果存在多个父级的话 就必须将父级全部浮动
</div>
<div>
3.添加div 清除浮动
    不适应.如果当PHP进行页面循环渲染后可能会多次重复.
</div>
<div>
4.overflow:hidden
    推荐使用此方案.
</div>

.box1{
    width: 200px;
    border: 10px solid red;
}

.box2{
    width:inherit;/*继承父级高度*/
    height: 200px;
    background-color: rebeccapurple;
}


.box2{
    float: left;
}
/*方案一:设置父级高度*/
/*.box1{
    height: 200px;
}*/
 /*方案二:父级也设置浮动*/
/*
.box1{
    float: left;
}*/

/*方案三:设置专门清楚浮动div*/
/*.clearn{
    clear: both;
}*/

/*方案四:设置overflow*/
.box1{
    overflow:hidden
}

2. 实例演示三列布局的实现原理( 绝对定位实现, 浮动定位实现)

实例

相对定位布局
<div class="main">
    <div class="left">左</div>
    <div class="content">中</div>
    <div class="right">右</div>
</div>

.main{
    width: 1000px;
    height: 800px;

}
.main{
    position: absolute;
}

.left{
    background-color: rebeccapurple;
    height:800px ;
    width: 200px;
    position: absolute;
    top: 0;
    left: 0;
}


.content{
    background-color: red;
    height:800px ;
    margin-left: 210px;
    margin-right: 210px;

}


.right{
    background-color: yellowgreen;
    position: absolute;
    height:800px ;
    width: 200px;
    top: 0;
    right: 0;
}