基於浮動的布局

基於浮動的布局是最容易使用，也是最可靠的，只需要設置元素的寬度，然後設置為左或者右浮動即可。

1.兩列浮動布局

假設頁面總的寬度920px，兩個元素間距20px。（display:inline 防止IE雙外邊距浮動產生的bug）；由於元素是浮動的，

將不再文檔流中占據空間，將父節點 overflow:hidden;

css代碼：

.right {
    width: 650px;
    padding-left: 10px;
    float: right;
    display: inline;
}

.left {
    width: 230px;
    float: left;
    display: inline;
}

2.三列布局

原理和兩列布局一致，可以在右元素裏面添加兩個元素。同理可以實現。

固定寬度、流式布局和彈性布局

以上的例子都是以像素為單位，稱為固定寬度的布局。是最簡單和最常用的布局方法。

固定寬度布局 缺點：

大屏幕下無法充分利用空間；小屏幕下顯示不全；固定寬度的布局適合瀏覽器默認的文字字號，如果將文本字號增加，會影響界面顯示。

1.流式布局

使用流式布局，尺寸是用百分數設置。可以根據瀏覽器窗口進行伸縮，通常會設置min-width，以免縮放頁面造成內容的擠壓。

如果設計者使用的寬度是960px,大多數用戶的屏幕是1250px來計算。百分比為960/1250=76.8%；

css代碼如下：

.root{
    width: 76.8%;
    margin: 0 auto;
    text-align: left;
}

.right {
    width:72.82%;
    float: right;
    display: inline;
}

.left {
    width: 25%;
    float: left;
    display: inline;
}

　　由於頁面有伸縮 可以增加 max-widht和min-width進行限制。

HTML CSS布局 二