本章主要探討 HTML5 中 CSS 早期所使用的傳統(tǒng)布局，很多情況下，這些布局方式還是非常有用的。

一．布局模型

在早期沒有平板和智能手機等移動設(shè)備大行其道的時期，Web 頁面的設(shè)計主要是面向PC 端電腦分辨率展開的。這種分辨率比例比較單一，基本上只要滿足最低分辨率設(shè)計即可。一般來說有 4:3、16:10、16:9 這樣的主要分辨率。那么，從這種比例上來看，長度總是大于寬度的。從最低分辨率 1024 * 768 設(shè)計即可。為了使瀏覽器底部不出現(xiàn)滾動條，需要減去適當(dāng)?shù)膶挾?#xff0c;比如減去 28，最終固定長度設(shè)置為 996 即可。當(dāng)然，也有一些網(wǎng)站在近兩年講最低分辨率設(shè)置為 1280 減去滾動條寬度，因為大顯示器逐步主流。

除了剛才所說的固定長度的布局，還有一種是流體布局，就是布局的長度為百分比，比 如 100%。不管你是什么分辨率，它都能全屏顯示，當(dāng)然，局限性也特別大，只適合一些單一頁面，復(fù)雜的頁面，會隨著不同瀏覽器產(chǎn)生各種閱讀障礙。

我們創(chuàng)建一個三行兩列模型。并采用表格布局和浮動布局，構(gòu)建固定和流體布局的方式，模型圖如下：

二．表格布局

表格布局，就是通過設(shè)定固定的單元格，去除表格邊框和填充實現(xiàn)的布局。當(dāng)然這個布局非常不建議使用，只是教學(xué)了解。表格應(yīng)該用它最為語義的地方，就是二維表的數(shù)據(jù)顯示。

1.固定布局

HTML 部分

? ? header

? ? asidesection

? ? footer

CSS 部分

body {margin:0;}

table {margin:0 auto; width: 960px; border-spacing: 0;}

.header {height: 120px; background-color: olive;}

.aside {width: 200px; height: 500px; background-color: purple;}

.section {width: 760px; height: 500px; background-color: maroon;}

.footer {height: 120px; background-color: gray;}

2.流體布局

表格的固定布局改成流體布局非常簡單，只需要設(shè)置 table 為 100%即可。

table {

? ? width: 100%;

}

三．浮動布局

浮動布局主要采用 float 和 clear 兩個屬性來構(gòu)建。

1.固定布局

HTML 部分

header

aside

section

footer

CSS 部分

body { width: 960px; margin: 0 auto; color: white;}

header {height: 120px;background-color: olive;}

aside {width: 200px; height: 500px; background-color: purple; float: left;}

section { width: 760px; height: 500px; background-color: maroon; float:right;}

footer { height: 120px; background-color: gray; clear:both;}

2.流體布局

流體布局只要更改 body 元素的限定長度為 auto 或 100%。然后左右兩列分別設(shè)置 20%和 80%即可。

CSS 部分

body {width: auto;}

aside {width: 20%;}

section {width: 80%;}

如果您覺得有用，記得在下方點贊、關(guān)注、留言，小編會定期奉 上更多的驚喜哦，您的打賞支持才是小編繼續(xù)努力的動力，么么噠。

每日分享在學(xué)習(xí)過程中總結(jié)的學(xué)習(xí)經(jīng)驗，學(xué)習(xí)筆記，筆試題，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以學(xué)習(xí)為目的，每天閱讀一篇文章，了解身邊的技術(shù)，陪有夢想的人一起成長！

總結(jié)

以上是生活随笔為你收集整理的css清除浮动的几种方法_CSS 分享几种传统布局方法[上]的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。