# 左側固定，右側自適應 ***** ``` //結構 <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> ```