注册登录

触发BFC，实现的三种自适应布局方式

1.左侧固定，右侧自适应

<style>
.left{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.right{
height: 300px;
background-color: lime;
overflow: hidden;
}
</style>
    

<div class="left"></div>
<div class="right"></div>
知识兔

2.右侧固定，左侧自适应

<style>
.left{
height: 300px;
background-color: lime;
overflow: hidden;
}
.right{
width: 200px;
height: 200px;
background-color: red;
float: right;
}

</style>
    

<div class="right"></div>    
<div class="left"></div>
知识兔

3.两侧固定，中间自适应

<style>
.left{
width: 200px;
height: 200px;
background-color: lime;
float: left;
}
.right{
width: 200px;
height: 200px;
background-color: lime;
float: right;
}
.center{
height: 300px;
background-color: red;
overflow: hidden;
}

</style>
    

<div class="left"></div>    
<div class="right"></div>
<div class="center"></div>
知识兔
计算机