CSS浮動與定位

浮動元素有什麼特徵？對父容器、其他浮動元素、普通元素、文字分別有什麼影響?

1.特徵：浮動元素會脫離正常的文件流，按照其外邊距指定的位置相對於它的上一個塊級元素（或父元素）顯示。2.對父容器：浮動元素脫離了普通文件流，所以將不能撐開父容器，造成父容器塌陷。3.對其他浮動元素：如果浮動方向相同，那麼其他浮動元素會按照順序在浮動方向上依次排列。當父容器的寬度不夠，浮動元素到下一行排列時，還會被前面較高的浮動元素所阻擋，出現“卡住”的情況，如下圖：

4.對普通元素：普通元素將不能感知到浮動元素的存在而佔據它的位置，且處於浮動元素下層。5.對文字：文字會圍繞浮動元素排列。

清除浮動指什麼? 如何清除浮動?

清除浮動就是清楚浮動元素給周圍元素帶來的影響：對浮動元素的兄弟元素來說，清除浮動就是使它們規定的一邊不能與浮動元素相鄰，用clear:left/right/both;對浮動元素的父元素來說，清除浮動就是解決浮動元素造成的父元素塌陷問題，可以使用的方法有：
1.在父元素中再加一個空的div，設定其樣式為clear:both。
2.BFC清理浮動，形成BFC的方法有：float:left/right; overflow:hidden/auto/scroll; display:inline-block; position:absolute/fixed等。

有幾種定位方式，分別是如何實現定位的，參考點是什麼，使用場景是什麼？

inherit 規定應該從父元素繼承 position 屬性的值。
static 預設值,沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。
relative 生成相對定位的元素，相對於元素本身正常位置進行定位。不會改變其他元素的位置。參考點是該元素原來的位置，應用場景例如對圖片位置做細微調整。
absolute 生成絕對定位的元素，相對於static定位以外的第一個祖先元素進行定位,元素的位置通過 left, top, right 以及 bottom 屬性進行規定，設定後會脫離普通文件流。參考點是最近的已定位祖先元素。絕對定位使用場景例如：設定上級元素為position:relative，然後可以利用絕對定位使該元素相對於上級元素移動到任意位置。
fixed 生成絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過 left, top, right 以及 bottom 屬性進行規定。參考點是瀏覽器視窗，使用場景例如需要使某個元素在瀏覽器視窗的固定位置顯示。
sticky CSS3新屬性，表現類似position:relative和position:fixed的合體，相容性差。

z-index 有什麼作用? 如何使用?

作用：z-index 屬性設定元素的堆疊順序。使用：設定z-index更高的元素會處於z-index較低的元素的前面。

position:relative和負margin都可以使元素位置發生偏移?二者有什麼區別？

使用相對定位不會改變其他元素的位置，而改變margin則會對其他元素的位置造成影響。

BFC 是什麼？如何生成 BFC？BFC 有什麼作用？舉例說明

BFC的全稱是 Block Format Content，塊級格式化上下文。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。生成BFC的方法有：float:left/right; overflow:hidden/auto/scroll; display:inline-block; 作用：BFC會阻止垂直外邊距摺疊；BFC不會重疊浮動元素；BFC可以包含浮動舉例：因為BFC可以包含浮動元素，那麼只要讓父容器生成BFC，就可以解決其子元素浮動造成的父元素塌陷問題：

在什麼場景下會出現外邊距合併？如何合併？如何不讓相鄰元素外邊距合併？

當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
外邊距合併常見的方式有三種：相鄰元素外邊距合併：兩個元素都設定外邊距時，垂直的外邊距是這兩個外邊距的較大值而不是它們的和（合併）；巢狀元素的外邊距合併：父子元素如果沒有邊框和內邊距把這兩個元素分開的話，它們的垂直外邊距會發生合併；自身外邊距合併：元素內部為空，自身的上下外邊距相遇時，也會發生合併。
阻止相鄰元素外邊距合併的方法：雖然設定浮動可以阻止相鄰元素外邊距合併，但為了清除外邊距合併而設定浮動的做法會帶來很多副作用，所以可以在設定margin值的時候調大一些。
父子外邊距合併示例：

效果練習：

alert效果： https://jsbin.com/nobinewego/
表單效果： http://js.jirengu.com/ditibitepo/3
模態框效果： http://js.jirengu.com/gazodotoka/2/
導航欄效果： http://js.jirengu.com/ducasegumi/2/