CSS3傳統(tǒng)布局

.box {
width: 100%;
margin: 0 auto;
}
.header {
height: 60px;
background-color: #ccc;
}
.content {
float: left;
width: 70%;
padding: 20px;
background-color: #eee;
}
.sidebar {
float: right;
width: 30%;
padding: 20px;
background-color: #f5f5f5;
}
.footer {
clear: both;
height: 40px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 40px;
}

CSS3傳統(tǒng)布局指的是使用很多年的網(wǎng)站布局方式，適用于很多簡單網(wǎng)站。整體布局包括四個部分，分別是header、content、sidebar和footer。

在以上代碼中，首先為外層容器.box設(shè)置了寬度100%，這樣就可以讓容器寬度自適應(yīng)父元素的寬度。然后通過設(shè)置margin: 0 auto將整個容器居中顯示。

.header用來設(shè)置頁頭，包括高度、背景顏色等樣式。.content和.sidebar分別用來設(shè)置左右兩側(cè)的內(nèi)容。通過設(shè)置float: left和float: right使得兩側(cè)內(nèi)容靠左和靠右顯示。同時設(shè)置寬度為70%和30%，讓兩側(cè)內(nèi)容自動適應(yīng)父元素寬度。

.footer用來設(shè)置頁腳。通過設(shè)置clear: both來清除浮動，并設(shè)置高度、背景顏色、文字顏色、文本居中和行高等樣式。

使用CSS3傳統(tǒng)布局可以在不使用Flexbox和Grid布局的情況下實現(xiàn)簡單布局效果。但是隨著Web技術(shù)的普及，使用Flexbox和Grid布局可以更加靈活方便地實現(xiàn)復(fù)雜布局效果。