布局要求
1. main模組最先載入
2. main模組寬度佔滿父容器
3. main模組浮動，left、right模組居左右
複製**
先看小例子的最終效果（前為未清除浮動，後為清除浮動）
基礎結構
聖杯布局
"content clearfix">
"main text">main
"left text">left
"right text">right
footer
複製**
因為要將main模組最先載入，所以根據解釋機制從上至下的特點，將main模組放置在父容器的最上面；最開始布局如下
2. 此時設定main模組樣式，
.main
複製**
3. 若要實現left居左，可以考慮如下設定
.left
複製**
4. 同理設定right模組，此時就能實現未清除浮動時的布局
.right
複製**
5. 可以看見foot模組因content內所有子元素均脫離文件流而上浮，於是被蓋住了，此時就引出了另乙個話題，清浮 6. 此處我用的是尼古拉斯大師清浮，**如下（清浮的總結在下文）,此時就完成我們的經典布局啦
.clearfix::after
複製**
####### 清浮目前業內有五種方法（我個人覺得可以算是三種，因為13均是clear：both；只不過利用了偽元素等特性簡化了一下而已；25均是觸發bfc）
在父級底部新增乙個div style="clear: both";
在父級樣式內新增：overflow: hidden/auto/scroll;*****=觸發bfc（塊級格式化上下文）
偽元素清除浮動*****父級新增偽元素，定義樣式為block且clear：both（本質上就是第一種的簡化版）
將父級元素設定浮動
尼古拉斯大師清浮====父級定義樣式為display: table====預設觸發bfc（塊級格式化上下文）
高階布局 浮動 清浮動
文件流 normal flow bfc block fromatting context 塊級格式化上下文,它是乙個獨立的渲染區域,只有block level box參與,它規定了內部的block level box如何布局,並且與這個區域外部毫不相干.bfc規則 1.內部的box會在垂直方向,乙個...
聖杯布局 浮動實現
聖杯布局是一種很常見的css布局。他要求 1 上部和下部各自占領螢幕所有寬度。2 上下部之間的部分是乙個三欄布局。3 三欄布局兩側寬度不變，中間部分自動填充整個區域。4 中間部分的高度是三欄中最高的區域的高度。浮動實現 12 3 1 填充三欄這一步驟，首先給底部區域清除浮動，防止跟隨上邊的區域一起浮...
布局（浮動）（彈性布局）（聖杯布局）
float浮動 left左浮動，right右浮動，元素浮動之後會脫離原來的文件流，參與浮動文件流，在浮動文件流中塊元素也是橫排布局，寬度也不再是100 cursor pointer 滑鼠樣式 clear both 最基本清除浮動的方法，是在最後乙個元素後邊新增乙個元素，設定這個元素的clear為bo...