一、浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?
特征：
1、浮動模型是一種可視化格式模型，浮動的框可以左右移動（根據float屬性值而定），直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣。
2、浮動元素不在文檔的普通流中，文檔的普通流中的元素表現的就像浮動元素不存在一樣。
3、如果包含塊兒太窄無法容納水平排列的三個浮動元素,那么其它浮動塊兒向下移動,直到有足夠的空間,如果浮動元素的高度不同,那么向下移動的時候可能被“卡住”，即向下移動時，它會優先向著有足夠空間的區域移動。
4、浮動會讓元素脫離普通流, 如果浮動的元素后面有一個文檔流中元素,那么這個元素的框會表現的像浮動元素不存在,但是框的文本內容會受到浮動元素的影響,會移動以留出空間。用術語說就是浮動元素旁邊的行框（行框：文字行或其它行組成的類似邊框的框）被縮短,從而給浮動元素流出空間,因而行框圍繞浮動框。
影響：
1、對父容器影響：父容器下的子元素如果都出現浮動，就會造成父元素容器高度坍塌（高度為0px）的問題。但是浮動還是以父容器的內邊框為界，并且會出現邊框合并的現象。
2、對其它浮動元素影響：浮動的框可以左右移動（根據float屬性值而定），直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣。
3、對普通元素影響：浮動會讓元素脫離普通流, 如果浮動的元素后面有普通元素,那么這個元素的框會表現的像沒有浮動元素存在一樣。
4、對文本影響：普通元素會忽略浮動元素，但是文本內容會移動，給浮動元素流出空間，就會有文本行框圍繞浮動元素的現象。
二、清除浮動指什么? 如何清除浮動的方法。
清除浮動：指清除你所需要的元素受到浮動元素的影響，例如邊距合并，控制位置等樣式。
方法1、使用clear屬性，屬性值left，right，both，none表示普通元素的框的哪些邊不挨著浮動框。需要注意的是，clear屬性只對自身有效，只能在自身元素中使用clear。在被清理的元素的外邊距上添加足夠的空間。
方法2、用clear時，需要邊框才能清理，但有時候有些浮動元素沒有現有的元素的邊框可以應用清理，所以我們只能添加一個空元素并且清理它。這樣可以實現我們希望的效果，但是需要添加多余的代碼<div class="clear"></div>，添加為父元素的最后一個塊。常常有元素可以應用 clear，但是有時候不得不為了進行布局而添加無意義的標記。（參考float）
方法3、使用E：after屬性選擇器，在父級容器最下面輸出一個空格，這種方法與方法二類似。解決父容器坍塌問題。（*zoom:1;是解決IE6/7兼容的問題）
.clearfix{ *zoom:1; } .clearfix:after{ content:""; display:block; clear:left; }
方法3、對容器 div 進行浮動，浮動父容器可以包括子浮動元素這樣會得到我們希望的效果。但有可能，下一個元素會受到這個浮動元素的影響。為了解決這個問題，有些人選擇對布局中的所有東西進行浮動，然后使用適當的有意義的元素（常常是站點的頁腳）對這些浮動進行清理。這有助于減少或消除不必要的標記。（參考W3）
方法4、BFC（塊級格式化上下文）“清理”浮動，對于嵌套元素，子元素浮動會對父容器產生影響，我們可以通過BFC這種方式，令父容器包含浮動子元素。實現BFC有多種方式，（參考MDN、參考W3）。但是使用這種方法也是有影響或者是局限性，例如使用display: inline-block，會縮短父容器長度。
綜上所述：對于特定的效果，我們需要使用合適的方法和屬性來解決問題。
三、有幾種定位方式，分別是如何實現定位的，參考點是什么，使用場景是什么？
CSS的 position 屬性設置元素的定位方式，為將要定位的元素定義定位規則。通常有四種定位方式：
1、普通流定位：也就是默認值為static,即沒有定位。
該值指定元素使用正常的布局行為，即元素在文檔流中當前的布局位置。此時 top, right, bottom, left 和 z-index 屬性無效。
2、相對定位元素（relatively positioned element）是計算后位置屬性為 relative 的元素。
該關鍵字下，元素先放置在未添加定位時的位置，再在不改變頁面布局的前提下調整元素位置（因此會在此元素未添加定位時所在位置留下空白）。
position:relative 未定義對 table--group, table-row, table-column, table-cell, table-caption 元素應用的效果。
3、絕對定位元素（absolutely positioned element）是計算后位置屬為 absolute 或 fixed 的元素。絕對定位寬度是收縮的，如果想撐滿父容器，可以設置 width: 100%。
absolute：不為元素預留空間，通過指定元素相對于最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設置外邊距（margins），且不會與其他邊距合并。參考點是相對于最近的未定位的祖先元素，例如：如果父元素被定位了，其參考點就是父容器的內邊界（lef/topt等四個屬性值為0，這樣更加精確一些，如果不設，就是內邊框內）；如果父元素沒有被定位，就參考父容器的父容器，直到找到被定為的祖先級元素，如果都沒有就是以html的內邊界（left/top等四個個屬性值為0，這樣更加精確一些），也就是根節點為參考點。
fixed：不為元素預留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出現在的每頁的固定位置。fixed 屬性會創建新的棧上下文。當元素祖先的 transform 屬性非 none 時，容器由視口改為該祖先。參考點是屏幕視口。
4、粘性定位元素（stickily positioned element）是計算后位置屬性為 sticky的元素。
sticky ：元素先按照普通文檔流定位，然后相對于該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。在所有情況下（即便被定位元素為 table 時），該元素定位均不對后續元素造成影響。當元素 B 被粘性定位時，后續元素的位置仍按照 B 未定位時的位置來確定。position: sticky 對 table 元素的效果與 position: relative 相同。由于兼容性很差，效果又可以在js中容易實現，所以一般不采用此種定位。
注意：
對于相對定位元素，top和 bottom 屬性指定它相對于正常位置的垂直偏移、left 和 right屬性指定水平偏移。
對于絕對定位元素，top、right、bottom 和 left 屬性指定元素相對于其包含塊的偏移，即此時位置為與包含塊的相對位置。元素的邊距（margin）定位在這些偏移之中。
在大多數時候，絕對定位元素的 height 和 width屬性的值為 auto，它們會自動計算以適合元素的內容。但是非替換（non-replaced）絕對定位元素可以占據 top和 bottom 的值（除 auto 外）所共同指定的可用空間，而不必設置 height（也就是設其為 auto）。left、right 與 width也類似。
絕對定位元素的定位值發生沖突時的解決方法:
1、如果同時指定 top和 bottom（非 auto），優先采用 top。
2、如果同時指定 left和 right，若 direction為 ltr（英語、漢語等），則
3、先采用 left；若 direction 為 rtl（阿拉伯語、希伯來語等），則優先采用 right。
四、z-index 有什么作用? 如何使用?
因為絕對定位與文檔流無關，所以絕對定位的元素可以覆蓋頁面上的其他元素。z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。該屬性設置一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。如果為正數，則離用戶更近，為負數則表示離用戶更遠。
屬性值auto：
元素不會建立一個新的本地堆疊上下文。當前堆疊上下文中新生成的元素和父元素堆疊層級相同。
屬性值<integer>：
整型數字是生成的元素在當前堆疊上下文中的堆疊層級。元素同時會創建一個堆疊層級為0的本地堆疊上下文。這意味著子元素的 z-indexes 不與元素外的其余元素的 z-indexes 進行對比。
五、position:relative和負margin都可以使元素位置發生偏移?二者有什么區別？
position:relative是指定元素相對未定位時的位置，在使用相對定位時，無論元素是否移動，元素在文檔流中占據原來空間，只是表現出來的位置會改變，而對后面元素的空間沒有影響。
margin偏移，會指定元素移動，但是由于元素是普通流，是會占用移動后的和移動前的空間，而且也會對后面的元素的位置造成影響。
六、BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
BFC：塊格式化上下文（block formatting context） ，是Web頁面的可視CSS渲染的一部分。它是塊盒子的布局發生及浮動體彼此交互的區域。對于定位 (參見 float
) 與清除浮動 (參見 clear
) 很重要。定位和清除浮動的樣式規則只適用于處于同一塊格式化上下文內的元素。浮動不會影響其它塊格式化上下文中元素的布局，并且清除浮動只能清除同一塊格式化上下文中在它前面的元素的浮動。（參考MDN）。
通俗的講，兩個相鄰元素或者嵌套元素，對其使用BFC，就會發生一些相互影響，通過通過使用不同的BFC屬性，可以達到不同的影響目的。
塊格式化上下文由以下之一創建：
根元素或其它包含它的元素
浮動 (元素的 float不是 none）
絕對定位的元素 (元素具有 position
為 absolute或 fixed)
內聯塊 inline-blocks (元素具有 display: inline-block)
表格單元格 (元素具有 display: table-cell，HTML表格單元格默認屬性)
表格標題 (元素具有 display: table-caption, HTML表格標題默認屬性)
塊元素 元素具有overflow 值不是 visible
彈性盒子 flex boxes (元素具有display: flex或 inline-flex)display: flow-root
BFC作用：
1、BFC會阻止垂直外邊距（margin-top、margin-bottom）折疊。
例如：解決嵌套元素margin合并問題，只要把父元素設為BFC就可以了。這樣子元素的margin就不會和父元素的margin發生重疊。
示列1：
<div class="ct"> <h1 style=" border: 1px solid; background: blue; margin: 50px; display: inline-block;">h1</h1> <h2 style="border: 1px solid; background: red; margin: 50px;">h2</h2> </div>
2、BFC不會重疊浮動元素。
示列2：
<div class="ct"> <h1 style=" border: 1px solid; background: blue; margin: 50px; display: inline-block;">h1</h1> <h2 style="border: 1px solid; background: red; margin: 50px; float: left;">h2</h2> </div>
3、BFC可以“清浮動”，這里其實說清浮動已經不再合適，應該說包含浮動。也就是說只要父容器形成BFC就可以，簡單看看如何形成BFC。
示列3：
<div class="ct" style=" border: 1px solid; overflow: hidden;"> <h1 style=" border:2px solid; float: right;">1</h1> </div>
參考BFC
七、在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。這種行為也稱為外邊距塌陷(margin collapsing)。
阻止外邊距合并可以有多種方式，例如使用定位position屬性；
示列1：
.ct{ margin: 20px; border: 2px solid; padding:10px; background: green; } .p2{ position: relative; margin：10px; background: yellow; /* left:20px; */ }
當把 left:20px加上，就會阻止外邊距合并。
示列2：使用浮動
.ct{ border: 2px solid; background: green; padding: 10px; display: inline-block; } .p2{ background:red; /* float: left; */ margin-left:10px; }
同樣，把float:left加上也會阻止合并。
源代碼是
<div class="ct"> <div class="p2">121</div> </div>
八、代碼
1、實現如下alert效果，效果范例
利用絕對定位實現居中效果效果1，也可以用margin:0 auto;實現居中效果。
2、實現如下表單效果， 效果范例
效果2多審查元素，查找錯誤的地方。
3、實現如下模態框效果， 效果范例
效果3實現模態框，首先在html上定義兩個div元素，其中外層div表示模態框外面的覆蓋層, 內層的div表示模態框。對兩個div設置絕對定位，使模態框居中。
4、實現如下導航欄效果，效果范例
效果4，本體難點是使“更多”子元素通過鼠標動作顯示。先在子元素選擇其中指定不顯示，再在偽類選擇器中指定為塊級元素顯示。
