浮動元素有什么特征？
特征
- 元素浮動之后不占據原來的位置
- 浮動的盒子在一行上顯示
- 行內元素浮動之后轉換為具備有塊級元素的特征，可以設置寬高
浮動元素對父容器、其他浮動元素、普通元素、文字分別有什么影響?
- 如果父容器的子元素都是浮動元素，如果父容器沒有定義高度，那么父容器會失去高度，在浮動元素之外。
- 對于普通元素，普通元素會感知不到浮動元素當然存在，如果寬高合適，后面的元素會占據浮動元素原來的位置
- 對于文字來說，能感知到浮動元素的存在，如果位置足夠，就能夠實現文本繞圖的效果
清除浮動指什么? 如何清除浮動? 兩種以上方法
清除浮動不是不要浮動，而是清楚浮動帶來的不利影響
方法
- 使父元素形成新的BFC，可以使用overflow：hidden/auto/scroll
display:inline-block float:方位等等 - 使用偽元素清楚浮動,如
.clearfix{zoom:1;}
.clearfix:after{
content:"";
display:block;
visible:hidden;
clear:both;
}
然后在需要清除浮動的元素進行調用。
有幾種定位方式，分別是如何實現定位的，參考點是什么，使用場景是什么？
- inherit 規定應該從父元素繼承 position 屬性的值
- static默認值,沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）
- relative生成相對定位的元素，相對于元素本身正常位置進行定位,因此，left:20px會向元素的 left 位置添加20px
- absolute生成絕對定位的元素，相對于static定位以外的第一個祖先元素（offset parent）進行定位,元素的位置通過 left, top, right以及 bottom 屬性進行規定
- fixed生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 left, top, right 以及 bottom 屬性進行規定
- stickyCSS3新屬性，表現類似position:relative和position:fixed的合體，在目標區域在屏幕中可見時，它的行為就像position:relative; 而當頁面滾動超出目標區域時，它的表現就像position:fixed，它會固定在目標位置
普通流與相對定位
CSS有三種基本的定位機制：普通流，相對定位和絕對定位
普通流是默認定位方式，在普通流中元素框的位置由元素在html中的位置決定，元素position屬性為static或繼承來的static時就會按照普通流定位，這也是我們最常見的方式
相對定位比較簡單，對應position屬性的relative值，如果對一個元素進行相對定位，它將出現在他所在的位置上，然后可以通過設置垂直或水平位置，讓這個元素相對于它自己移動，在使用相對定位時，無論元素是否移動，元素在文檔流中占據原來空間，只是表現出來的位置會改變
絕對定位與固定定位相對定位可以看作特殊的普通流定位，元素位置是相對于它在普通流中位置發生變化，而絕對定位使元素的位置與文檔流無關，也不占據文檔流空間，普通流中的元素布局就像絕對定位元素不存在一樣
絕對定位的元素的位置是相對于距離最近的非static祖先元素位置決定的。如果元素沒有已定位的祖先元素，那么他的位置就相對于初始包含塊html來定位
因為絕對定位與文檔流無關，所以絕對定位的元素可以覆蓋頁面上的其他元素，可以通過z-index
z-index 有什么作用? 如何使用?
- z-index 屬性指定一個元素的堆疊順序。因為絕對定位的元素脫離了普通流，所以絕對定位的元素可以覆蓋頁面上的其它元素。這時可以通過給元素設置z-index屬性來控制疊放順序，擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
- z-index有三個屬性
auto 默認。堆疊順序與父元素相等。
number設置元素的堆疊順序。
inherit規定應該從父元素繼承 z-index 屬性的值。
position:relative和負margin都可以使元素位置發生偏移?二者有什么區別
position:relative;只相對自己原本位置發生偏移，不影響其它普通流中元素的位置。margin：除了讓元素自身發生偏移還影響其它普通流中的元素。
BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
BFC是指塊級元素格式化，在同一個BFC中，元素會遵守一些規則，如從上到下排列，邊距合并等，如果是相鄰兩個元素分別處于兩個BFC當中，則一般不會遵循這些規則。
作用：
（1） 解決margin重疊問題，在同一個BFC中，相鄰元素之間的邊距會合并，如果把這兩個元素分別放在兩個BFC中，name他們的邊距就不會合并。一般應用于嵌套關系。
（2）清除浮動。BFC不會重疊浮動元素。
在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
外邊距合并出現的三個場景。
- 同一個BFC，且同處于普通流中的垂直相鄰元素外邊距合并。
- 父子元素的外邊距合并。
- 空元素的外邊距合并。
合并規則：
- 兩個margin都是正值的時候，取兩者的最大值；
- 當 margin 都是負值的時候，取的是其中絕對值較大的，然后，從0位置，負向位移；
- 當有正有負的時候，先取出負 margin 中絕對值中最大的，然后，和正 margin 值中最大的 margin 相加。
- 所有毗鄰的margin要一起參與運算，不能分步進行
不讓相鄰元素外邊距合并的方法： - 被非空內容、padding、border 或 clear 分隔開。
- 不在一個普通流中或一個BFC中。
- margin在垂直方向上不毗鄰。
總結：
- 這些margin都處于普通流中，并在同一個BFC中；
- 這些margin沒有被非空內容、padding、border 或 clear 分隔開；
- 這些margin在垂直方向上是毗鄰的，包括以下幾種情況：
一個box的top margin與第一個子box的top margin
一個box的bottom margin與最后一個子box的bottom margin，但須在該box的height 為auto的情況下
一個box的bottom margin與緊接著的下一個box的top margin
一個box的top margin與其自身的bottom margin，但須滿足沒創建BFC、零min-height、零或者“auto”的height、沒有普通流的子元素。
- 例外的情況
根元素的外邊距不會參與折疊
不設置任何屬性的空span和空div不影響任何布局，可以無視之。
