CSS实现自适应两栏布局方法

摘要：浮动+margin第一种：左侧栏固定宽度向左浮动，右侧主要内容则用margin-left留出左侧栏的宽度，默认宽度为auto，自动填满剩下的宽度。第二种：左边绝对定位（脱离文档流，不占位置）

html代码：

<div>
    <div>固定宽度</div>
    <div>自适应区域</div>
</div>

第一种：左侧栏固定宽度向左浮动，右侧主要内容则用margin-left留出左侧栏的宽度，默认宽度为auto，自动填满剩下的宽度。

.left{ float: left;}
.right{ margin-left: 200px;}

第二种：左边绝对定位（脱离文档流，不占位置），右侧margin-left流出左侧栏宽度

.left{ position: absolute;}
.right{margin-left: 200px;}

缺点:

使用了绝对定位，若是用在某个div中，需要更改父容器的position。没有清除浮动的方法，若左侧盒子高于右侧盒子，就会超出父容器的高度。因此只能通过设置父容器的min-height来放置这种情况。

第三种：左侧float、右侧float+calc()计算属性

.left{ float: left;}
.right{float:right; width:calc(100%-200px);}

第四种：float+BFC BFC区域不会与float元素区域重叠

.left{ float: left;}
.right{overflow:hidden;}

第五种：flex

.main{ display: flex;}
.right{flex: 1;}

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！