為了更好理解浮動和position，建議先看看我寫的這篇文章
《html文件流和文件物件模型dom理解》
css設計float屬性的主要目的，是為了實現文字繞排的效果。然而，這個屬性居然也成了建立多欄布局最簡單的方式。
如何浮動乙個元素？先設定其寬度width，再增加樣式規則float:left/right。
//注意：該浮動元素已從正常文件流中刪除。浮動元素是被塊級元素忽略的元素，但是內聯元素知道它們在**，內聯元素會留意浮動元素的邊界，而塊元素會正常流向頁面。
提到浮動，就得提清除浮動clear。如下圖：
因為塊級元素不知道左側浮動元素的存在（浮動元素不在文件流中），所以塊級元素會鋪滿整個區域。可以用元素的css clear屬性來提出請求：當元素流入頁面時，在這個元素的左邊、右邊或兩邊不允許有浮動內容。
新增樣式clear:left; 這樣，塊級元素就會在浮動元素的下面了。
position屬性有4個值:static、relative、absolute、fixed。
(一)static
html元素的預設值，即沒有定位，元素出現在正常的流中。
靜態定位的元素不會受到top, bottom, left, right影響。
(二)relative
相對的是元素原來在文件流中的位置（或者預設位置）。相對定位會讓元素正常地流入頁面，不過在頁面上顯示之前要進行偏移。
//注意：這個元素原來佔據的空間保留著，其他元素沒改變位置。相對定位元素經常被用來作為絕對定位元素的容器塊。
(三)absolute
絕對定位會把元素從文件流中刪除，塊元素和內聯元素都不知道它的存在，絕對定位的元素的定位上下文是最近的已定位父元素，其預設的定位上下文
元素。//絕對定位元素的任何祖先元素都可以成為它的定位上下文，只要把相應祖先元素的position設定為relative/fixed即可。
(四)fixed
固定定位會把元素從文件流中刪除，塊元素和內聯元素都不知道它的存在，其定位上下文是視視窗。
ps：relative、absolute、fixed有z-index屬性。
浮動float，定位position理解
浮動，定位可以實現網頁的排版 float屬性總結 使用場景一 實現網頁中併排布局 特點 實現左右併排時 1 當父元素足夠寬度足夠時，則依次布局 2 浮動的元素佔據空間的寬度就是內容的寬度 缺點 影響 父元素高度塌陷 原因 子元素 清除浮動方法 1 可以增加父元素的高度 2 可以增加乙個空的div，然...
理解position定位
使用css布局position非常重要，語法如下 position static relative absolute fixed center page sticky 預設值 static，center page sticky是css3中新增加的值。1 static 可以認為靜態的，預設元素都是靜態...
定位和position定位
定位有 普通流定位 浮動定位 相對定位 絕對定位 固定定位 特點普通定位 被稱為文件流定位，是頁面元素預設的定位方式 塊級 從上到下，獨佔一行 行級 從左到右，不獨佔一行 浮動定位 1.浮動元素脫離文件流，未浮動元素上前補位 2.浮動元素會停靠在父級元素的左邊或者右邊，亦或者緊跟其他元素邊緣 3.浮...