经典的流式布局实现方法总结(二)

前言:

昨天总结了经典的流式布局中的左侧固定，右侧自适应。今天总结一下右侧固定左侧自适应的三种实现方法。其实,左侧固定右侧自适应和右侧固定左侧自适应基本差不多,就是左右换一下。但是，需要强调和注意的是利用bfc块级格式化上下文, 实现右侧固定左侧自适应的时候，需要在html结构上让右盒子在前。

右侧固定左侧自适应的三种实现方法:

1.利用bfc块级格式化上下文, 实现右侧固定左侧自适应
（1） 先从结构上就要让 右盒子 先右浮
（2）再给 left 左盒子, 添加 overflow: hidden;

具体css代码

<style>
    .father {
      height: 400px;
      background-color: pink;
    }
    .right {
      float: right;
      width: 200px;
      height: 300px;
      background-color: blue;
    }
    .left {
      height: 350px;
      background-color: green;
      overflow: hidden;
    }
    /* 注意点:
            1. 先从结构上就要让 右盒子 先右浮
            2. 再给 left 左盒子, 添加 overflow: hidden;
     */
  </style>

html结构

<div class="father">
    <div class="right"></div>   //注意: 一定要right 在前
    <div class="left"></div>
</div>

2.利用定位实现右侧固定左侧自适应

(1) 给父盒子设置padding-right 值

(2) 给右侧子盒子设置width = padding-right ,并定位到父盒子的padding-right上.

(3) 左侧盒子自适应

具体css代码

<style>
    .father {
      height: 400px;
      background-color: pink;
      padding-right: 200px;
      position: relative;
    }
    .right {
      width: 200px;
      height: 300px;
      background-color: blue;
      position: absolute;
      top: 0;
      right: 0;
    }
    .left {
      height: 350px;
      background-color: green;
    }
    
  </style>

html结构

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

3.利用flex布局 实现右侧固定左侧自适应

(1) 给父盒子设置display:flex ;

(2) 右侧盒子设置固定宽高 ,左侧盒子设置flex:1 ;

具体css代码

<style>
    .father {
      height: 400px;
      background-color: pink;
      display: flex;
    }
    .right {
      float: right;
      width: 200px;
      height: 300px;
      background-color: blue;
    }
    .left {
      height: 350px;
      background-color: green;
      flex: 1 ;
    }
    
  </style>

html结构

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