# 左侧固定，右侧自适应 ***** ``` //结构 <div class="demo"> <div class="left"></div> <div class="right"></div> </div> ``` 表现形式  ## 1.Flex ``` <style> * { padding: 0; margin: 0; } .demo { overflow: hidden; display: flex; } .left { width: 200px; height: 200px; background-color: red; } .right{ height: 200px; background-color: aquamarine; flex: 1; } </style> ``` ## 2.float + BFC ``` <style> * { padding: 0; margin: 0; } .demo { overflow: hidden; } .left { width: 200px; height: 200px; background-color: red; float: left; } .right { height: 200px; background-color: aquamarine; /* 形成BFC盒子 */ overflow: auto; } </style> ``` ## 3.float + margin-left ``` <style> * { padding: 0; margin: 0; } .demo { /* 清除浮动 */ overflow: hidden; } .left { width: 200px; height: 200px; background-color: red; float: left; } .right { height: 200px; background-color: aquamarine; /* 固定盒子的宽度 */ margin-left: 200px; } </style> ```