浮動元素的特征加派，對于父容器、其他浮動元素南用、普通元素和文字分別都有什么影響膀钠？
- 對于父容器
- 浮動元素會生成一個塊級框，而不論這個元素本身是什么裹虫，即使讓一個鏈接元素浮動肿嘲，如果其本身是行內(nèi)元素，也會生成塊級框浮動元素的左右邊界不能超過包含塊的邊界
- 一個浮動元素的頂端不能比其父元素的內(nèi)頂端更高筑公。
- 對于其它浮動元素
- 浮動元素的外邊距不會合并
- 一個浮動元素的左（或右）邊界必須是原文檔中之前出現(xiàn)過的浮動元素的右（或左）邊界雳窟，除非后出現(xiàn)的浮動元素的頂端在先前出現(xiàn)的浮動元素的底端。這樣有效的避免了浮動元素之間的重疊
- 浮動元素的頂端不能比之前所有的浮動元素或塊級元素的頂端更高
- 對于普通元素和文字
- 浮動元素脫離文檔的普通流匣屡，文檔中普通流的元素便顯的就像浮動元素不存在一樣
- 浮動元素會以某種方式從文檔流中刪除封救，不過依然會影響布局。
- 如果源文檔中一個浮動元素之前出現(xiàn)一個元素捣作，浮動元素的頂端不能比包含該元素所生成框的任何行框的頂端更高
- 行內(nèi)框與一個元素重疊時誉结，其邊框、背景和內(nèi)容都在該浮動元素“之上”顯示
- 塊框與一個浮動元素重疊時券躁，其邊框和背景在該浮動元素“之下”顯示惩坑，而內(nèi)容則在浮動元素“之上”顯示
清除浮動的方法
解決浮動父容器高度塌陷問題
父容器高度塌陷
- 在其父容器中最后添加一個空的div，并設置樣式clear：both也拜。（缺點是添加了一個無意義的標簽）
- 使父容器形成BFC清除浮動
-
通用在其父容器上添加如下：
圖片.png
幾種定位方式的實現(xiàn)方式以舒，參考點及使用場景
定位機制有三種，分別是普通流（static慢哈、relative）蔓钟，浮動，絕對定位（absolute岸军、fixed）奋刽。
- inherit 規(guī)定從其父元素繼承position屬性的值
- static 默認值，沒有定位艰赞，元素出現(xiàn)在正常流中
- absolute 生成絕對定位元素佣谐，相對于static定位以外的第一個祖先元素進行定位，可設置上下左右屬性值方妖。
- relative 生成相對定位的元素狭魂，相對于元素本身正常位置進行定位，可設置上下左右屬性值党觅。
- fixed 生成絕對定位的元素雌澄，相對于瀏覽器器窗口進行定位，可設置上下左右屬性值杯瞻。
z-index的作用及使用方法
改變元素相互覆蓋的順序镐牺，應用于定位元素，值越大覆蓋優(yōu)先級越大魁莉。
position：relative和負margin都可以使元素發(fā)生偏移睬涧？二者的區(qū)別
將元素定位設置為相對定位后，元素的偏移不會對其他元素造成影響旗唁，而使用margin進行元素偏移時其他相鄰元素也會相應發(fā)生偏移畦浓，這是我們所不希望的。
BFC是什么检疫？如何生成BFC讶请？BFC的作用？
BFC（block format content）是塊級格式上下文屎媳，存在IE低版本不兼容的問題夺溢，生成BFC的條件有
- float為left|right
- overflow為 hidden|auto|scroll
- display為 table-cell|inline-block|table-caption
- position為 absolute|fixed
- 作用有
- BFC會阻止垂直外邊距的折疊
只有同屬一個BFC時，兩個元素才有可能發(fā)生垂直Margin的重疊 - BFC不會重疊浮動元素
- BFC可以包含浮動（利用此條特性來“清除浮動”烛谊，也就是說對父容器添加這些屬性形成BFC）
在什么場景下出現(xiàn)外邊距合并企垦？如何合并？如何不讓相鄰元素外邊距合并晒来？舉例父子外邊距合并
- 出現(xiàn)外邊距合并的情境
- 兩個元素上下排列钞诡，上面的元素有margin-bottom，下面的元素有margin-top
- 父元素有margin-top/bottom同時子元素也有
- 空元素同時有margin-top/bottom其上下margin會合并
- 如何合并
- 相鄰元素間上下外邊距取margin值大的那個
- 父子元素外邊距合并會讓父元素對外展現(xiàn)出來的外邊距將直接變成這個父元素和其第一個子元素的margin-top的較大者湃崩。
- 當元素為空元素時荧降，元素的上下margin會合并，并且多個兄弟（父子）空元素的外邊距會合并成一個攒读，最終展現(xiàn)出來的外邊距會是多個外邊距中較大的那個朵诫，如果當中有負margin的存在時，合并后的外邊距將是最大正邊距加上最小負邊距
- 如何不讓相鄰元素外邊距合并
設置浮動薄扁；
設置為display：inline-block剪返；
使其父元素各形成BFC废累； - 舉例說明父子外邊距合并
圖片.png
圖片.png
