CSS介绍4种方式实现自适应两栏布局_css高度自适应怎么实现-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45742208/article/details/130837835

文章介绍了使用float、position、bfc和flex布局方式来实现页面左侧或右侧固定，另一侧自由伸缩的效果。分别展示了不同方法的CSS代码示例，包括浮动布局、定位布局、BFC块格式化上下文以及Flex布局的实现技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

左右侧固定实现都是一样道理的

前3种方式统一布局：

<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

1、float:

右侧固定，左侧自由伸缩。效果图：

在这里插入图片描述

* {
    padding: 0;
    margin: 0;
 }
.left {
   float: right;
   width: 100px;
   height: 100px;
   background-color: transparent;
}
.right {
   height: 100px;
   margin-right: 100px; 
   background-color: burlywood;
}

2、position:

右侧固定，左侧自由伸缩。效果图：

在这里插入图片描述

* {
    margin: 0;
    padding: 0;
}
.left {
     position: absolute;
     right: 0;
     width: 100px;
     height: 100px;
     background-color: red;
        }
.right {
      height: 100px;
      background-color: tomato;
      margin-right: 100px;
}

3、bfc:

左侧固定，右侧自由伸缩。效果图：

在这里插入图片描述

 * {
   padding: 0;
   margin: 0;
 }
.left {
    float: left; 
    width: 100px;
    height: 100px;
    background-color: transparent;
        }
.right {
     height: 100px;
     /* 触发bfc */
     overflow: hidden;
     background-color: crimson;
}

4、flex:

左侧固定，右侧自由伸缩。效果图：

在这里插入图片描述

布局：

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

css：

.box {
   display: flex;
}
.right {
     flex: 1;
     height: 100px;
     background-color: blanchedalmond;
        }
.left {
     width: 100px;
     height: 100px;
     background-color: transparent;
}