1. 浮動元素有什么特征难衰？對父容器捏卓、其他浮動元素、普通元素否纬、文字分別有什么影響?
浮動元素會脫離原本的文檔流吕晌，浮動框會根據(jù)設(shè)定值在左右移動，直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣临燃。
對父容器而言睛驳，父元素的 height 和 width 不會因為浮動元素的存在而被撐開，如果這個父容器內(nèi)包含的子元素全部是浮動元素膜廊，那么它的寬高都會默認為0乏沸。
對其他浮動元素而言，如果包含塊太窄無法容納水平排列的全部浮動元素爪瓜，那么其它浮動元素會向下移動蹬跃，直到有足夠的空間，而如果浮動元素的高度不同铆铆，那么向下移動的時候可能會被卡住蝶缀。
對其他普通元素而言，浮動元素的框會表現(xiàn)得像不存在薄货，但普通元素框內(nèi)的浮動元素旁邊的行框會被縮短翁都，給浮動元素留出空間，行框圍繞著浮動框谅猾，即文字會圍繞著浮動框柄慰。
2. 清除浮動指什么? 如何清除浮動? 兩種以上方法
使用 clear 屬性可以設(shè)置不允許元素左右出現(xiàn)浮動元素：
- clear: left 不允許元素左邊出現(xiàn)浮動元素
- clear: right 不允許元素右邊出現(xiàn)浮動元素
- clear: both 元素兩邊都不可以出現(xiàn)浮動元素
- clear: none 不清除浮動
清除浮動是為了解決浮動父容器高度塌陷問題，讓父元素在視覺效果上包裹浮動元素赊瞬。
- 將父元素的最后子元素的 clear 屬性值為 both 先煎，父元素被撐開，在視覺上父元素包裹住所有子元素巧涧。
- 可以將父元素設(shè)置為BFC來清除浮動。
3. 有幾種定位方式遥倦，分別是如何實現(xiàn)定位的谤绳，參考點是什么占锯，使用場景是什么？
- static —— 默認值缩筛，沒有定位消略，元素出現(xiàn)在正常流中
- relative —— 相對定位，相對于元素本身正常位置定位瞎抛，對其他元素來說艺演，相對定位的元素的原位置仍然可見，定位時保留
- absolute —— 絕對定位桐臊，相對于第一個非 static 定位的祖先元素進行定位胎撤，以該祖先元素的內(nèi)邊框為基準，即包括內(nèi)容區(qū)和內(nèi)邊距断凶，對其他元素來說伤提，絕對定位的元素的位置是不可見的，原位置也不做保留
- fixed —— 絕對定位认烁，相對于瀏覽器窗口進行定位肿男，對其他元素來說，絕對定位的元素的位置是不可見的却嗡，原位置也不做保留
- sticky —— CSS3新屬性舶沛，相當于relative和fixed的結(jié)合，但兼容性差窗价，不常使用
- inherit —— 從父元素繼承 position 屬性
4. z-index 有什么作用? 如何使用?
z-index 可以控制元素的疊放順序冠王，z-index 越高，元素位置越靠上舌镶。
z-index 的默認值為 auto柱彻，不具有繼承屬性，可以通過設(shè)置數(shù)值或 inherit 從父元素繼承來設(shè)置 z-index 的屬性值餐胀，可以設(shè)置負值哟楷。
5. position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
- 負 margin 可以和其他定位方式結(jié)合使用，但如果設(shè)置 position: relative 就不能再使用其他的定位了否灾。
- 使用 position: relative卖擅，元素本身在文檔流中的位置不會發(fā)生改變，但使用負 margin 會使元素本身在文檔流中的位置發(fā)生改變墨技。
6. BFC 是什么惩阶？如何生成 BFC？BFC 有什么作用扣汪？舉例說明
BFC 塊級格式化上下文（block format content）断楷，BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素崭别。
元素設(shè)置左/右浮動冬筒，overflow 屬性設(shè)置為 hidden 或 scroll恐锣，display 設(shè)置為inline-block、table-cell 或 table-captain舞痰，position 設(shè)置為 absolute 或 fixed土榴，即可生成BFC。
BFC會阻止垂直外邊距合并响牛；BFC可以包含浮動玷禽；BFC不會重疊浮動元素。
可以使用BFC解決外邊距重疊問題呀打，也可以用來清除浮動矢赁。
7. 在什么場景下會出現(xiàn)外邊距合并？如何合并聚磺？如何不讓相鄰元素外邊距合并坯台？給個父子外邊距合并的范例
外邊距合并指的是，塊級元素的上外邊距和下外邊距相遇時有時會合并為單個外邊距瘫寝。
以下三種情況會導致外邊距合并：
- 毗鄰兄弟元素：
毗鄰的兩個兄弟元素之間的外邊距會塌陷（當后者被清除浮動時除外）蜒蕾，此時兩元素之間的外邊距為上面元素的下外邊距和下面元素的上外邊距中的較大值。 - 塊級父元素與其第一個/最后一個子元素：
如果塊級父元素中焕阿，不存在上邊框咪啡、上內(nèi)邊距、inline content暮屡、清除浮動這四條屬性時撤摸，那么這個塊級元素和其第一個子元素的上邊距就挨到了一起，此時這個父元素對外展現(xiàn)出來的外邊距將直接變成這個父元素和其第一個子元素的margin-top的較大者褒纲。類似的准夷，若塊級父元素的 margin-bottom
與它的最后一個子元素的margin-bottom之間沒有父元素的 border、
padding莺掠、inline content衫嵌、height
、min-height彻秆、max-height 分隔時楔绞，就會發(fā)生 下外邊距合并 現(xiàn)象。 - 空塊元素：
如果存在一個空的塊級元素唇兑，其 border
酒朵、padding、inline content扎附、height蔫耽、min-height 都不存在。那么此時它的上下邊距中間將沒有任何阻隔帕棉，此時它的上下外邊距將會合并针肥。
外邊距合并計算規(guī)則
- 當兩個外邊距都是正值時饼记，按較大值的外邊距顯示
- 當兩個外邊距一正一負時香伴，保留兩個外邊距值相加之和的外邊距慰枕，如果計算值為負值，則下層的元素會被覆蓋一部分
- 當兩個外邊距都為負值時即纲，按絕對值較大的外邊距顯示
阻止外邊距合并：
為父元素設(shè)置 border具帮、padding，使父子元素的外邊距接觸不到低斋，就可以避免父子元素的外邊距合并蜂厅，另外形成BFC也可以阻止外邊距合并。
有css代碼如下：
.fa{
margin: 20px;
background-color: #abc;
}
.child1{
z-index:20;
background-color: pink;
margin: 20px;
}
.child2{
background-color: yellow;
margin: 30px;
}
.child3{
background-color: #786;
margin:40px;
}
如圖膊畴，方塊1的上外邊距和父元素的上外邊距發(fā)生了合并掘猿，方塊3的下外邊距和父元素的下外邊距發(fā)生了合并，1唇跨、2稠通、3之間也發(fā)生了外邊距合并：
