浮動：float： float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 css 中，任何元素都可以浮動。浮動元素會生成乙個塊級框，而不論它本身是何種元素。 如果浮動非替換元素，則要指定乙個明確的寬度；否則，它們會盡可能地窄。
注釋：假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。 值 描述 left 元素向左浮動。 right 元素向右浮動。 none 預設值。元素不浮動，並會顯示在其在文字**現的位置。 inherit 規定應該從父元素繼承 float 屬性的值。
learninpro learninpro learninpro
由於浮動元素會脫離文件流顯示，所以在浮動元素後面的塊級元素會預設佔據這些元素的位置，就會造成這些塊級元素會在浮動元素的下層顯示，出現浮動元素蓋住後面正常文件流元素的效果，但這往往不是我們想要的結果。
其作用是改變 使用清除浮動的這個元素 與 前乙個宣告的浮動元素 之間的預設布局規則，讓 使用清除浮動的這個元素 在新的一行中顯示。
如何清除浮動
clear屬性，其值為left | right | both。
浮動元素或者非浮動元素的塊級元素都可以使用這個屬性來清除浮動（我們之前說inline和inline-block元素可以自動識別浮動，所以他們不需要清除浮動）， 他們的作用物件是前乙個宣告的浮動元素。如果使用 clear:left | right 則是清除前乙個float為left或者right的元素的浮動，clear：both則是清除前乙個浮動元素，無論它是向哪邊移動。那麼使用clear屬性的元素會在浮動元素的下方新開一行顯示。
定位屬性：position：這個屬性定義建立元素布局所用的定位機制。
任何元素都可以定位，不過絕對或固定元素會生成乙個塊級框，而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏 值 描述 absolute 生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位。
元素的位置通過 「left」, 「top」, 「right」 以及 「bottom」 屬性進行規定。 fixed 生成絕對定位的元素，相對於瀏覽器視窗進行定位。 元素的位置通過 「left」, 「top」, 「right」 以及 「bottom」 屬性進行規定。
relative 生成相對定位的元素，相對於其正常位置進行定位。 因此，「left:20」 會向元素的 left 位置新增 20 畫素。 static 預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。 inherit 規定應該從父元素繼承 position 屬性的值
postion:relative是子塊級元素面向父級元素的相對定位，定位關鍵字使用left/right/top/bottom。兄弟塊元素之間相對進行定位，但是position移動後，會保留所占有的位置。而且隨後的兄弟塊元素定位基於被移走前的位置。
position:relative + position:absolute|絕對定位+相對定位
this is div-1a element.
this is div-1 element.
#div-1
#div-1a
定位和浮動
能把元素定在螢幕的任意位置，該元素脫離文件流。什麼是文件流 文件流指的是元素排版布局過程中，元素會自動從左往右，自上而下的流式布局。一 relative 相對定位 相對定位的元素相對於自身偏移 相對定位的元素不會脫離文件流 二 absolute 絕對定位 使元素完全脫離文件流 相對於 static ...
浮動和定位
float屬性 高度塌陷 清除浮動 清除浮動不是不讓元素浮動，而是清除浮動對父級帶來的影響 清除浮動的方法 給浮動元素的父級設定高度height 不推薦使用 缺點 很多情況下 高度都是不確定的 所有不適用 以浮制浮，給浮動元素的父元素設定浮動，原理是開啟bfc 不推薦使用 缺點 只有在父級需要浮動的...
浮動 定位和層級
浮動的 float left 左浮動 float right 右浮動浮動的特點 如果父盒子中有乙個子盒子，父盒子沒有設定高度，子盒子浮動，那麼父盒子不能被子盒子撐開，即父盒子高度為0，這時下面的盒子會佔位。在浮動的盒子之下再放乙個標籤，在這個標籤中使用clear both,來清除浮動對頁面的影響。又...