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

前言:

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

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

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

具体css代码

html结构

    
   //注意: 一定要right 在前
    

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

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

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

(3) 左侧盒子自适应

具体css代码

html结构

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

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

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

具体css代码

html结构