布局常用的方法：①用float設計浮動布局:float預設值為none,可根據頁面需要設定為左浮動left，或右浮動right；
瀏覽器中效果：
因為 div 是區塊元素，每個 div 獨佔一行，要想讓三個 div 在同一行裡顯示，就需要給三個子元素設定浮動，但浮動會使元素脫離文件流，父元素高度崩塌，所以就要在父元素上清除浮動找回高度。
②利用position做定位布局： position 預設值為static，可根據頁面需要設定為相對定位 relative 、絕對定位 absolute、固定定位 fixed。
與position一起使用的是四個座標系統屬性 top 、right 、 bottom 、left，可根據需要設定偏移值。
瀏覽器效果：
效果與浮動定位相同。
補充：在定位布局中，絕對定位的元素，會相對於第乙個 static 定位以外的祖先元素進行定位。
深入css布局 2 定位與浮動
在css知識體系中，除了css選擇器，樣式屬性等基礎知識外，css布局相關的知識才是css比較核心和重要的點。今天我們來深入學習一下css布局相關的知識。上篇文章我們講完了css布局中盒模型和元素分類的相關知識，同時介紹了box sizing和行框。這篇我們繼續.上篇我們講解了不同型別元素的特點，我...
css的布局方式（浮動布局，定位布局，伸縮盒）
布局 使用塊元素搭建網頁結構,改變預設文件流的方式，讓其在一行中顯示多列。讓塊在一行中顯示 浮動布局 float 為了讓塊元素在一行顯示 float left 向左浮動 right 向右浮動 可以使塊元素脫離當前的文件流 1 寬度如果沒有手動指定那麼就由內容決定 2 多個浮動元素在乙個浮動流中併排顯...
css浮動布局
float 是 css 的定位屬性。在傳統的印刷布局中，文字可以按照需要圍繞。一般把這種方式稱為 文字環繞 在網頁設計中，應用了css的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對 定位的頁面元素相比是乙個明顯的不同。絕對定位的頁面元素被...