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

浮動元素脫離普通文檔流，浮動元素能覆蓋普通文檔流，浮動樣式可以應用在塊級元素和行內(nèi)元素上。不參與文檔流中父容器高度的計算。
浮動元素向左向右浮動，遇到父容器的邊框或者遇移動方向的浮動元素才停下。
父容器的的

浮動元素與普通文檔流再表現(xiàn)上相互感覺不到對方的存在，互不干涉，不在一個層面
文本內(nèi)容會受到浮動框的影響，給浮動元素留出空間，（浮動元素旁邊的行框被縮短，行框圍繞浮動框），文本能感受到浮動元素的存在，受浮動元素的排版影響，向下排列。

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

    clear：both; 清除指定元素左右任意一個或兩邊不出現(xiàn)（沒有）浮動元素存在

在父元素中子元素的后面添加一個子元素，子元素不設(shè)置寬高，設(shè)置其屬性clear： both;撐開父元素的高度。
在浮動元素的父容器設(shè)置其中一個屬性，overflow:hidden; position: absolute; display: inline-height; 都可以創(chuàng)建BFC，
形成BFC后，BFC自帶清除浮動的特性。父容器可以包含浮動元素。

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

    position: static  默認定位方式。沒有定位，元素出現(xiàn)在正常的文檔流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

相當于普通文檔流

    relative  相對定位， 相對于自身元素在文檔流中的位置的偏移 ，占據(jù)空間，外形位置發(fā)生移動，但是本身的位置一直不變。

icon 圖標沒有調(diào)好位置，對齊，用相對定位調(diào)位置

    absolute;  絕對定位， 相對于與元素最相近的定位的（static以外的）父祖先元素的位置         

應用于打開網(wǎng)站時的彈窗

    fixed   固定定位，相對于瀏覽器窗口定位，在一個位置保持不變 

場景： 網(wǎng)站的top到頂端按鈕 位置固定不變

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

控制元素層疊順序，z-index解決重疊時的顯示次序問題
所有的層都可以用一個整數(shù)(z軸順序)來表明當前層在z軸的位置。 數(shù)字越大， 元素越接近觀察者。Z軸順序用CSS的[z-index]屬性來指定。
使用z-index很簡單： 給它指定一個整數(shù)值即可。

其他注意問題：

只限于定位元素以及flex盒子的孩子元素；Z軸，用戶觀察屏幕的垂直角度，應該是 識別的z-indx值，在同一個層疊上下文領(lǐng)域，層疊水平值大的那一個覆蓋小的那一個。通俗講就是官大的壓死官小的。
參考文獻 http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/33/
千萬不要把層疊水平和CSS的z-index屬性混為一談。沒錯，某些情況下z-index確實可以影響層疊水平，但是，只限于定位元素以及flex盒子的孩子元素；而層疊水平所有的元素都存在。

Paste_Image.png

Paste_Image.png

z-index一旦變成數(shù)值，哪怕是0，都會創(chuàng)建一個層疊上下文。
層疊領(lǐng)域的黃金準則。當元素發(fā)生層疊的時候，其覆蓋關(guān)系遵循下面2個準則：

（1）誰大誰上：當具有明顯的層疊水平標示的時候，如識別的z-indx值，在同一個層疊上下文領(lǐng)域，層疊水平值大的那一個覆蓋小的那一個。通俗講就是官大的壓死官小的。
（2）后來居上：當元素的層疊水平一致、層疊順序相同的時候，在DOM流中處于后面的元素會覆蓋前面的元素。
在CSS和HTML領(lǐng)域，只要元素發(fā)生了重疊，都離不開上面這兩個黃金準則。

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

relative 相對定位 是位置與自身之前的位置發(fā)生變化，占據(jù)之前的位置，文檔流不會有影響，不影響其他的相鄰元素的位置，可能會與其他元素重疊覆蓋。

負margin 也會使元素位置偏移，它會放棄偏移之前占據(jù)的空間，緊挨其后的元素會填充這部分空間；

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

BFC(Block Format Contet)塊級格式化上下文。塊格式上下文是頁面CSS 視覺渲染的一部分，用于決定塊盒子的布局及浮動相互影響范圍的一個區(qū)域。

生成BFC
overflow: hidden;
display: inline-height;
display: table-cell;
positon: absolute;或者是fixed
float: left;

BFC的作用
1.BFC會阻止垂直外邊距margin-top和magin-bottom 的折疊。
文檔流在一般情況下容易合并元素的垂直邊距或者父子外邊距合并，有時候合并的效果并不是我們想要的，為了恢復之前的樣式，可以創(chuàng)建BFC，BFC 可以阻止折疊。

2. BFC不會重疊浮動元素
   浮動元素覆蓋普通文檔流，文本會感受到浮動框的存在，會留出浮動框的空間，得到文本圍繞浮動框的效果。為了使文本和浮動元素不重疊，使用BFC.
3. BFC可以包含浮動
   浮動元素脫離文檔流，父容器不包含浮動元素，也感受不到他的存在，將父容器創(chuàng)建成BFC , 就可以包含浮動。

注意事項：塊格式化上下文對于定位（float）和清除浮動 (clear) 很重要。定位和清除浮動的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。浮動不會影響其它塊格式化上下文中元素的布局，并且清除浮動只能清除同一塊格式化上下文中在它前面的元素的浮動

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

兩個垂直相鄰的塊級元素外邊距合并
或者是父容器的外邊距與第一個（最后一個）子元素的外邊距合并

垂直元素的外邊距之間合并，取兩者外邊距值間的較大者。
父子元素之間的合并，當父元素中沒有出現(xiàn)padding 、border、 overflow值時，會取較大值作為父元素的外邊距，

補充：
負margin：
兩個相鄰的外邊距都是負數(shù)時，合并結(jié)果是兩者絕對值的較大值。
兩個外邊距一正一負時，合并結(jié)果是兩者的相加的和。

不讓相鄰元素外邊距合并：
父元素中有padding border overflow 屬性的設(shè)置，則阻斷合并，子元素的外邊距為自身邊距的值，父元素也是自己本身的邊距值

范例：https://jsbin.com/vakabibebe/edit?html,css,output
*{
margin: 0;
padding: 0;
}
.box{
background-color: yellow;
margin: 20px 0;
}
.box11{
width: 100px;
height: 200px;
margin: 30px 30px;
background: red;
}

1 alert彈窗的效果

https://jsbin.com/tubomuhosu/edit?html,css,output

2 表單效果

https://jsbin.com/haciyodivu/edit?html,css

3 模態(tài)框效果

https://jsbin.com/gubitapayo/edit?html,css

4 導航欄

https://jsbin.com/zewifunuvu/edit?html,css,output