浮動元素有什么特征？

特征

• 元素浮動之后不占據(jù)原來的位置
• 浮動的盒子在一行上顯示
• 行內(nèi)元素浮動之后轉(zhuǎn)換為具備有塊級元素的特征，可以設(shè)置寬高

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

• 如果父容器的子元素都是浮動元素，如果父容器沒有定義高度，那么父容器會失去高度，在浮動元素之外。
• 對于普通元素，普通元素會感知不到浮動元素當(dāng)然存在，如果寬高合適，后面的元素會占據(jù)浮動元素原來的位置
• 對于文字來說，能感知到浮動元素的存在，如果位置足夠，就能夠?qū)崿F(xiàn)文本繞圖的效果

清除浮動指什么? 如何清除浮動? 兩種以上方法

清除浮動不是不要浮動，而是清楚浮動帶來的不利影響

方法

• 使父元素形成新的BFC，可以使用overflow：hidden/auto/scroll
  display:inline-block float:方位等等
• 使用偽元素清楚浮動,如

.clearfix{zoom:1;}
.clearfix:after{ 
content:"";
display:block;
visible:hidden;
clear:both;
}

然后在需要清除浮動的元素進(jìn)行調(diào)用。

有幾種定位方式，分別是如何實現(xiàn)定位的，參考點是什么，使用場景是什么？

• inherit 規(guī)定應(yīng)該從父元素繼承 position 屬性的值
• static默認(rèn)值,沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）
• relative生成相對定位的元素，相對于元素本身正常位置進(jìn)行定位,因此，left:20px會向元素的 left 位置添加20px
• absolute生成絕對定位的元素，相對于static定位以外的第一個祖先元素（offset parent）進(jìn)行定位,元素的位置通過 left, top, right以及 bottom 屬性進(jìn)行規(guī)定
• fixed生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。元素的位置通過 left, top, right 以及 bottom 屬性進(jìn)行規(guī)定
• stickyCSS3新屬性，表現(xiàn)類似position:relative和position:fixed的合體，在目標(biāo)區(qū)域在屏幕中可見時，它的行為就像position:relative; 而當(dāng)頁面滾動超出目標(biāo)區(qū)域時，它的表現(xiàn)就像position:fixed，它會固定在目標(biāo)位置
  普通流與相對定位
  CSS有三種基本的定位機(jī)制：普通流，相對定位和絕對定位
  普通流是默認(rèn)定位方式，在普通流中元素框的位置由元素在html中的位置決定，元素position屬性為static或繼承來的static時就會按照普通流定位，這也是我們最常見的方式
  相對定位比較簡單，對應(yīng)position屬性的relative值，如果對一個元素進(jìn)行相對定位，它將出現(xiàn)在他所在的位置上，然后可以通過設(shè)置垂直或水平位置，讓這個元素相對于它自己移動，在使用相對定位時，無論元素是否移動，元素在文檔流中占據(jù)原來空間，只是表現(xiàn)出來的位置會改變

絕對定位與固定定位相對定位可以看作特殊的普通流定位，元素位置是相對于它在普通流中位置發(fā)生變化，而絕對定位使元素的位置與文檔流無關(guān)，也不占據(jù)文檔流空間，普通流中的元素布局就像絕對定位元素不存在一樣

絕對定位的元素的位置是相對于距離最近的非static祖先元素位置決定的。如果元素沒有已定位的祖先元素，那么他的位置就相對于初始包含塊html來定位

因為絕對定位與文檔流無關(guān)，所以絕對定位的元素可以覆蓋頁面上的其他元素，可以通過z-index

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

• z-index 屬性指定一個元素的堆疊順序。因為絕對定位的元素脫離了普通流，所以絕對定位的元素可以覆蓋頁面上的其它元素。這時可以通過給元素設(shè)置z-index屬性來控制疊放順序，擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
• z-index有三個屬性
  auto 默認(rèn)。堆疊順序與父元素相等。
  number設(shè)置元素的堆疊順序。
  inherit規(guī)定應(yīng)該從父元素繼承 z-index 屬性的值。

position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別

position:relative;只相對自己原本位置發(fā)生偏移，不影響其它普通流中元素的位置。margin：除了讓元素自身發(fā)生偏移還影響其它普通流中的元素。

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

BFC是指塊級元素格式化，在同一個BFC中，元素會遵守一些規(guī)則，如從上到下排列，邊距合并等，如果是相鄰兩個元素分別處于兩個BFC當(dāng)中，則一般不會遵循這些規(guī)則。
作用：
（1） 解決margin重疊問題，在同一個BFC中，相鄰元素之間的邊距會合并，如果把這兩個元素分別放在兩個BFC中，name他們的邊距就不會合并。一般應(yīng)用于嵌套關(guān)系。
（2）清除浮動。BFC不會重疊浮動元素。

在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例

外邊距合并出現(xiàn)的三個場景。

• 同一個BFC，且同處于普通流中的垂直相鄰元素外邊距合并。
• 父子元素的外邊距合并。
• 空元素的外邊距合并。

合并規(guī)則：

• 兩個margin都是正值的時候，取兩者的最大值；
• 當(dāng) margin 都是負(fù)值的時候，取的是其中絕對值較大的，然后，從0位置，負(fù)向位移；
• 當(dāng)有正有負(fù)的時候，先取出負(fù) margin 中絕對值中最大的，然后，和正 margin 值中最大的 margin 相加。
• 所有毗鄰的margin要一起參與運算，不能分步進(jìn)行
  不讓相鄰元素外邊距合并的方法：
• 被非空內(nèi)容、padding、border 或 clear 分隔開。
• 不在一個普通流中或一個BFC中。
• margin在垂直方向上不毗鄰。

總結(jié)：

• 這些margin都處于普通流中，并在同一個BFC中；
• 這些margin沒有被非空內(nèi)容、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，但須滿足沒創(chuàng)建BFC、零min-height、零或者“auto”的height、沒有普通流的子元素。

• 例外的情況

根元素的外邊距不會參與折疊
不設(shè)置任何屬性的空span和空div不影響任何布局，可以無視之。