前言 　　為了更好理解浮動和position，建議先看看我寫的這篇文章《Html文檔流和文檔對象模型DOM理解》 正文 　　一、浮動 　　CSS設計float屬性的主要目的，是為了實現文本繞排圖片的效果。然而，這個屬性居然也成了創建多欄布局最簡單的方式。 　　如何浮動一個元素？先設定 ...

一、浮動（float） 1、CSS布局的三種機制 （1）網頁布局的核心——就是用CSS來擺放盒子 CSS提供了3種機制來設置盒子的擺放位置，分別是普通流（標准流）、浮動和定位 ①普通流（標准流） ●塊級元素會獨占一行，從上到下順序排列； 　　○常用元素：div、hr、p、h1~h6 ...

網頁在解析時，遵循從上向下，從左向右的順序。 1、從上至上，從左至右的布局。 2、符合html中標簽本身含義的布局，比如某些標簽獨占一行。有些標簽屬於行內元素等。 浮動 浮動的框可以向左或向右移動 直到它的外邊緣碰到包含框或另一個浮動框的邊框停止為止 會使元素向左或向右移動，其周圍 ...

二、定位（position） 　　初始狀態 　　1、相對浮動特點（relative）： ...

HTML(浮動、定位(float、position)) float屬性 定義：元素在那個反向浮動。以往這個屬性總用於圖像，是文本圍繞在圖像周圍，不過在CSS中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。 如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡 ...

浮動很好用，但是用浮動后，當浮動元素的父級元素沒有高度時，就會造成高度塌陷，從而影響布局。下面就從一開接觸前端時，漸漸發現解決高度塌陷的問題的方式。 一、給浮動元素的父級元素添加固定的高度css【height:200px】 　　 很多時候就是不想把如下布局中的父極元素的高度定死，講究 ...

前言 　　在自己建站的過程中，要實現一個div隨滾動條浮動的效果，網上找了些示例不太好用，還是自己動手，豐衣足食，寫的不好請大家諒解，畢竟我不是搞前端的，因為自己建站畢竟每一步都必須自己來，這邊只是做個記錄。 position:fixed 　　實現浮動主要有個css屬性：position ...

語法： position：static （靜態定位） | absolute （絕對定位） | fixed （固定定位） | relative （相對定位） 屬性參數： static：靜態定位，無特殊定位，對象遵循HTML定位規則（html的默認狀態） absolute：絕對定位 ...