Css中position、float和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 屬性的值。

 

float:

塊級元素水平方向的auto，塊級元素的margin、border、padding以及content寬度之和等於父元素width。使用auto屬性在父元素寬度變化的時候，該元素的寬度也會隨之變化。

當該元素被設爲浮動時，該元素的width就變成了內容的寬度了，由內容撐開，也就是所謂的有了包裹性。overflow | position:absolute | float:left/right均可以產生包裹性，替換元素也一樣具備包裹性。

在具備包裹性的元素上想利用width : auto；來讓元素寬度自適應瀏覽器寬是不行的。

元素浮動後，父元素會塌陷此時可使用clear來清除浮動，讓父元素就會包含它中間的浮動元素了

參考：CSS浮動

clear:

CSS clear屬性指定：一個元素是緊挨着前面的浮動元素，仍是必須移動到它們的下面（浮動被清除）。
clear屬性既能夠用於浮動元素，也能夠用於非浮動元素。

當應用於非浮動塊時，它將元素的邊框邊界移動到全部相關浮動元素外邊界的下方。這個行爲做用時會致使外邊距摺疊不起做用。

當應用於浮動元素時，它將元素的外邊界移動到全部相關的浮動元素外邊界的下方。這會影響後面浮動元素的佈局，後面的浮動元素的位置沒法高於它以前的元素。

要被清除的相關浮動元素指 在相同塊級格式化上下文中的前置浮動。

註釋:若是你想要一個元素將全部浮動元素包含在內，你既能夠將這個容器設置爲浮動，又能夠經過 ::after 僞元素設置clear屬性做爲替代。

#container:after {
 content: "";
 display: block;
 clear: both;
}

clear的方式有2種， 一種是使用僞類，另一種是使用一個clear的元素，這樣外面的元素就會包含它中間的浮動元素了。

外邊距合併:

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。

合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

註釋：只有普通文檔流中塊框的垂直外邊距纔會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。

參考： CSS 外邊距合併

參考文章:

這多是史上最全的CSS自適應佈局總結

https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear

http://sonspring.com/journal/clearing-floats

http://yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/