公司專案需要使用兩列布局，要求左右列寬度自適應，左列高度隨著內容自動出現滾動條，網上的方案有很多種，研究了一下採用float+bfc的解決方案。
最終實現效果如圖：
原理：html**：浮動元素的塊狀兄弟元素會無視浮動元素的位置，盡量佔滿一整行，這樣該兄弟元素就會被浮動元素覆蓋。
若浮動元素的塊狀兄弟元素為bfc，則不會佔滿一整行，而是根據浮動元素的寬度，佔據該行剩下的寬度，避免與浮動元素重疊。
浮動元素與其塊狀bfc兄弟元素之間的margin可以生效，這將繼續減少兄弟元素的寬度。
right
.parent
.left
.left__item
.right
兩列自適應布局
要求 1 兩個盒子在同一行 2 右邊的盒子需要佔滿剩下的空間 3 兩個盒子不能重疊 方式一 左側欄寬度不固定 兩列自適應布局title html,body wrap header container 父元素新增偽元素樣式清除浮動，處理float的子元素無法撐開父元素高度問題 clearfix aft...
兩列固定，中間列寬度自適應
首先，我先舉兩個例子，乙個是聖杯型布局，另外乙個是雙飛翼型。雙飛翼型是某博主由聖杯型參考後自創的乙個布局方式。1.聖杯型布局 嘗試之路考慮以下dom結構 id page id hd div id bd class main div class sub div class extra div div ...
html 三列布局（兩列自適應，一列固定寬度）
原文 html 三列布局 兩列自適應，一列固定寬度 不做過多解釋 主要是記錄乙個完整的布局樣式，實現頁面大致三列其中左右兩列是自適應寬度，中間固定寬度效果。不多少 奉上 公共標籤樣式 main 外邊框自適應區域 main title 標題 main title 頭部文號區 70px content ...