這是我們經常可能會遇到到一種布局方法，或者是右側固定，左側自適應，下面列出我歸納總結的幾種方法，是實際開發中比較常用和實用的幾種方法
寫在前面
歸納總結了幾種比較ok的方法，左右布局是基本功之一，雖然現在我們基本在開發中都會使用類似antd，element，iview這些前端ui框架，這些框架已經把傳統的布局樣式給封裝的很完美了，但是作為前端的css基礎，我認為這些也是必須掌握的，而且很有可能在實際開發過程中就遇到了呢
- 方法一：左側div浮動 右側元素設置margin-left自適應
- 方法二：左側div浮動，右側元素創建BFC
- 方法三：左側div采用絕對布局，右側元素設置margin-left自適應
- 方法四：外層父級元素使用table布局，子元素使用table-cell
- 方法五：雙float + calc計算寬度
- 方法六：flex布局
首先列出通用的css樣式
通用css樣式：
.mainContent {
/* 基本最外層父級元素，不需要做任何特殊處理,這里寫著，只是在實際開發中，外層肯定會有一個嵌套的父級元素 */
}
.main-1::after {
/*通用css 用于清除浮動，使用浮動布局必然會涉及到清除浮動，這里我只用了最常用的方法，其余方法請讀者自行搜索*/
content: "";
clear: both;
display: block;
height: 0;
}
.leftDivCommon {
/*左側布局通用樣式*/
background: gray;
width: 200px;
height: 400px;
}
.rightDivCommon {
/*右側布局通用樣式*/
background: #feee;
height: 300px;
}
方法一：左側div浮動 右側元素設置margin-left自適應
html：
<div>
<h1>方法一：左側div浮動 右側元素設置margin-left自適應</h1>
<div className="mainContent main-1">
<div className="left-1 leftDivCommon">This is left</div>
<div className="right-1 rightDivCommon">This is right</div>
</div>
</div>
css：
.left-1 {
float: left;
}
.right-1 {
/* 第一種方法，右側元素必須寫margin-left，距離等于左側元素的寬度，
因為左側元素已經浮動了，浮動元素是脫離文檔流的，如果不加這個margin，右側寬度和左側如果
一樣，就沒什么區別，如果右側寬度和
左側不一樣的話，那么加上背景顏色后，會出現右側包裹左側的情況出現，
就是因為左側元素脫離文檔流后，右側未浮動的元素會覆蓋文檔流當前的全部塊級
*/
margin-left: 200px;
}
方法二：左側div浮動，右側元素創建BFC（關于BFC的詳細介紹，請讀者自行搜索，很多文章已經介紹的很清楚了）
html：
<div>
<h1>方法二：左側div浮動，右側元素創建BFC</h1>
<div className="mainContent main-1">
<div className="left-2 leftDivCommon">This is left</div>
<div className="right-2 rightDivCommon">This is right</div>
</div>
</div>
css：
.left-2 {
float: left;
}
.right-2 {
/*
創建BFC的方法，BFC是一個上下文環境，創建方法如下
float的值不為none
position的值不為static或者relative
display的值為 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一個
overflow的值不為visible
*/
overflow: auto;
}
方法三：左側div采用絕對布局，右側元素設置margin-left自適應
html：
<div>
<h1>方法三：左側div采用絕對布局，右側元素設置margin-left自適應</h1>
<div className="mainContent-3 main-1">
<div className="left-3 leftDivCommon">This is left</div>
<div className="right-3 rightDivCommon">This is right</div>
</div>
</div>
css：
.mainContent-3 {
position: relative;
min-height: 400px;
}
.left-3 {
/*
這個方法有兩個弊端，不建議采用這種方法
- 必須規定外層父級元素的position是relative或者absolute
- 采用絕對布局的方法的問題在于無法使用清除浮動讓最外層的父級元素把全部內容給包住，如果是浮動元素，可以在外層包裹標簽上寫清除浮動，
這種方法要解決這個問題，只能在外層寫height來強制規定高度包含左側的高度，這種方法很不好，因為里面有可能還會包含一些其他的元素，需要精確計算好高度
*/
position: absolute;
}
.right-3 {
margin-left: 200px;
}
方法四：外層父級元素使用table布局，子元素使用table-cell
html：
<div>
<h1>方法四：外層父級元素使用table布局，子元素使用table-cell</h1>
<div className="mainContent-4">
<div className="left-4 leftDivCommon">This is left</div>
<div className="right-4 rightDivCommon">This is right</div>
</div>
</div>
css：
.mainContent-4 {
/*
對table-cell元素設置百分比（如100%）的寬高值時無效的，但是可以將父元素設置display:table，
再將父元素設置百分比寬高，子元素table-cell會自動撐滿父元素。這就可以做相對于整個頁面的水平垂直居中
注意：
（1）display: table時padding無效
（2）display: table-row時margin、padding無效
（3）display: table-cell時margin無效
*/
display: table;
width: 100%;
}
.left-4 {
display: table-cell;
}
.right-4 {
display: table-cell;
}
方法五：雙float + calc計算寬度
html：
<div>
<h1>方法五：雙float + calc計算寬度</h1>
<div className="mainContent main-1">
<div className="left-5 leftDivCommon">This is left</div>
<div className="right-5 rightDivCommon">This is right</div>
</div>
</div>
css：
.left-5 {
float: left;
}
.right-5 {
float: left;
width: calc(100% - 200px);
}
方法六：flex布局
html：
<div>
<h1>方法六：flex布局</h1>
<div className="mainContent-6 main-1">
<div className="left-6 leftDivCommon">This is left</div>
<div className="right-6 rightDivCommon">This is right</div>
</div>
</div>
css：
.mainContent-6 {
display: flex;
}
.left-6 {
flex: 0 0 200px;
}
.right-6 {
flex: 1;
}
寫在后面
網上關于左右基本布局的css樣式歸納也不在少數了，這里作為我個人學習記錄的一個總結，給大家分享，如果覺得對你有幫助，可以給我點個贊
