浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?
特征：
1、浮動元素會脫離正常的文檔流，按照其外邊距指定的位置相對于它的上一個塊級元素（或父元素）顯示
2、浮動元素后面的塊級元素的內容會向此浮動元素的外邊距靠齊，但是邊框和背景卻忽略
3、浮動元素而向上一個任意非浮動元素靠齊
4、浮動元素后面的內聯元素會向此浮動元素的外邊距靠齊
float造成的影響：
1、對其父元素的影響
對于其父元素來說，元素浮動之后，它脫離當前正常的文檔流，所以它也無法撐開其父元素，造成父元素的塌陷
2、對其兄弟元素（非浮動）的影響
如果兄弟元素為塊級元素，該元素會忽視浮動元素的而占據它的位置，并且元素會處在浮動元素的下層，但它的內部文字和其他行內元素都會環繞浮動元素。如果如果兄弟元素為內聯元素，則元素會環繞浮動元素排列。
3、對其兄弟元素（浮動）的影響
同一個方向的浮動元素：當一個浮動元素在浮動過程中碰到同一個方向的浮動元素時，它會緊跟在它們后面
反方向的浮動元素：互不影響，位于同一條水平線上，當空間不夠時會被擠下
4、對子元素的影響
當一個元素浮動時，在沒有清除浮動的情況下，它無法撐開其父元素，但它可以讓自己的浮動子元素撐開它自身，并且在沒有定義具體寬度情況下，使自身的寬度從100%變為自適應（浮動元素display:block）。其高度和寬度均為浮動元素高度和非浮動元素高度之間的最大值。
清除浮動指什么? 如何清除浮動? 兩種以上方法
浮動：
浮動框不屬于文檔中的普通流，當一個元素浮動之后，不會影響到 塊級框的布局而只會影響內聯框（通常是文本）的排列，文檔中的普通流就會表現得和浮動框不存在一樣，當浮動框高度超出包含框的時候，也就會出現包含框不會 自動伸高來閉合浮動元素（“高度塌陷”現象）。正是因為浮動的這種特性，導致本屬于普通流中的元素浮動之后，包含框內部由于不存在其他普通流元素了，也就表現出高度為0（高度塌陷）。在實際布局中，往往這并不是我們所希望的，所以需要閉合浮動元素，使其包含框表現出正常的高度。
清除浮動的方法：
1、添加空的div，對他進行清理：
<div style="clear: both;"></div>
缺點：增加了一個無意義的標簽。
2、BFC清理浮動（BFC詳解請看下面）：在父容器中生成BFC。
觸發BFC
float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block, flex, inline-flex)
position值為（absolute，fixed）
局限性：使用BFC使用float的時候會使父容器長度縮短，而且還有個重要缺陷——父容器float解決了其塌陷問題，那么父容器的父容器怎么辦？overflow屬性會影響滾動條和絕對定位的元素；position會改變元素的定位方式，這是我們不希望的，display這幾種方式依然沒有解決低版本IE問題。。。
3、通用的清理浮動法案
方法1
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
方法2
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
雖然我們得出了一種瀏覽器兼容的靠譜解決方案，但這并不代表我們一定得用這種方式，很多時候我們的父容器本身需要position：absolute等形成了BFC的時候我們可以直接利用這些屬性了，大家要掌握原理，活學活用。總而言之清理浮動兩種方式：
1、利用 clear屬性，清除浮動
2、使父容器形成BFC
有幾種定位方式，分別是如何實現定位的，參考點是什么，使用場景是什么？
1、static：
默認值，沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index聲明）。當你沒有為一個元素(例如div)指定定位方式時，默認為static，也就是按照文檔的流式(flow)定位，將元素放到一個合適的地方。所以在不同的分辨率下，采用流式定位能很好的自適合，取得相對較好的布局效果。
2、relative：
生成相對定位的元素，相對于其正常位置進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。在static的基礎上，如果我想讓一個元素在他本來的位置做一些調整(位移)，我們可以將該元素定位設置為relative，同時指定相對位移(利用top,bottom,left,right)。有一點需要注意的是，相對定位的元素仍然在文檔流中，仍然占據著他本來占據的位置空間——雖然他現在已經不在本來的位置了。絕對定位會使元素從文檔流中被刪除，結果就是該元素原本占據的空間被其它元素所填充。
3、fixed：
元素框的表現類似于將 position 設置為 absolute，不過其包含塊是視窗本身。我們知道absolute定位的參照物是“上一個定位過的父元素(static不算)”，那么如果我想讓一個元素定位的參照物總是整個文檔(viewport)，怎么辦呢？答案是使用fixed定位，fixed定位的參照物總是當前的文檔。利用fixed定位，我們很容易讓一個div定位在瀏覽器文檔的左上，右上等方位。比如你想添加一個信息提示的div，并將該div固定在右上方，你可以使用以下css
.element {position：fixed；top：2%；right：2%； }
4、absolute：
生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。如果你想在一個文檔(Document)中將一個元素放至指定位置，你可以使用absolute來定位，將該元素的position設置為absolute，同時使用top,bottom,left,right來定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
z-index 有什么作用? 如何使用?
當網頁上出現多個由絕對定位（POSITION:absolute）或固定定位（POSITION:fixed）所產生的浮動層時，必然就會產生一個問題，就是當這些層的位置產生重合時，誰在誰的上面呢？或者說誰看得見、誰看不見呢？這時候就可以通過設置z-index的值來解決，這個值較大的就在上面，較小的在下面。z-index的意思就是在z軸的順序，如果說網頁是由x軸和y軸所決定的一個平面，那么z軸就是垂直于屏幕的一條虛擬坐標軸，浮動層就在這個坐標軸上，那么它們的順序號就決定了誰上誰下了。
z-index沒有單位，z-index：99；這樣寫就夠了和定位一起用，絕對定位才可以觸發z-index屬性
position:relative和負margin都可以使元素位置發生偏移?二者有什么區別？
1、position:relative是相對定位可以使元素發生偏移，但是在文檔流中，它仍然占據著原來的位置，所以其他元素的位置不會發生變化
2、負margin：通過負margin進行偏移的元素，它會放棄偏移前占據的空間，這樣它后面文檔流中的其它元素就會“流”過來填充這部分空間，所以其他元素的位置發生了變化。
在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。
1、當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并。
2、當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合并。
3、假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合并：如果這個外邊距遇到另一個元素的外邊距，它還會發生合并。
父子元素之間的外邊據合并
消除邊距合并的方式一：給父元素加邊框
消除邊距合并的方式二：給父元素加padding
BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
BFC 定義
BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干。
Box
Box 是 CSS 布局的對象和基本單位， 直觀點來說，就是一個頁面是由很多個 Box 組成的。元素的類型和 display 屬性，決定了這個 Box 的類型。 不同類型的 Box， 會參與不同的 Formatting Context（一個決定如何渲染文檔的容器），因此Box內的元素會以不同的方式渲染。讓我們看看有哪些盒子：
1、block-level box:display 屬性為 block, list-item, table 的元素，會生成 block-level box。并且參與 block fomatting context；
2、inline-level box:display 屬性為 inline, inline-block, inline-table 的元素，會生成 inline-level box。并且參與 inline formatting context；
Formatting context
Formatting context 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。
BFC布局規則：
1、內部的Box會在垂直方向，一個接一個地放置。
2、Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊
3、每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
4、BFC的區域不會與float box重疊。
5、BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
6、計算BFC的高度時，浮動元素也參與計算
哪些元素會生成BFC?
1、根元素
2、float屬性不為none
3、position為absolute或fixed
4、display為inline-block, table-cell, table-caption, flex, inline-flex
5、overflow不為visible
BFC的作用：
1、自適應兩欄布局
每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
我們可以通過通過觸發main生成BFC， 來實現自適應兩欄布局。
2、清除內部浮動
計算BFC的高度時，浮動元素也參與計算，解決父容器塌陷問題。
3、防止垂直 margin 重疊
我們可以在p外面包裹一層容器，并觸發該容器生成一個BFC。那么兩個P便不屬于同一個BFC，就不會發生margin重疊了。
