浮動元素有什么特征则披？對父容器搂誉、其他浮動元素、普通元素熟呛、文字分別有什么影響?
- 浮動元素會脫離正常的文檔流宽档，按照其外邊距指定的位置相對于它的上一個塊級元素（或父元素）顯示。
- 浮動元素后面的塊級元素的內(nèi)容會向此浮動元素的外邊距靠齊庵朝，但是邊框和背景卻忽略浮動元素而向上一個任意非浮動元素靠齊吗冤。
- 浮動元素后面的內(nèi)聯(lián)元素會向此浮動元素的外邊距靠齊又厉。
- 對其父元素的影響
對于其父元素來說，元素浮動之后欣孤，它脫離當前正常的文檔流馋没，所以它也無法撐開其父元素，造成父元素的塌陷 - 對其兄弟元素（非浮動）的影響
如果兄弟元素為塊級元素降传，該元素會忽視浮動元素的而占據(jù)它的位置篷朵，并且元素會處在浮動元素的下層（并且無法通過z-index屬性改變他們的層疊位置），但它的內(nèi)部文字和其他行內(nèi)元素都會環(huán)繞浮動元素婆排。
如果如果兄弟元素為內(nèi)聯(lián)元素声旺，則元素會環(huán)繞浮動元素排列。 - 對其兄弟元素（浮動）的影響
同一個方向的浮動元素：當一個浮動元素在浮動過程中碰到同一個方向的浮動元素時段只，它會緊跟在它們后面
反方向的浮動元素：互不影響腮猖，位于同一條水平線上，當空間不夠時會被擠下 - 對子元素的影響
當一個元素浮動時赞枕，在沒有清除浮動的情況下澈缺，它無法撐開其父元素，但它可以讓自己的浮動子元素撐開它自身炕婶，并且在沒有定義具體寬度情況下姐赡，使自身的寬度從100%變?yōu)樽赃m應（浮動元素display:block）。其高度和寬度均為浮動元素高度和非浮動元素高度之間的最大值柠掂。 - 對文字的影響
浮動元素旁邊的文字框被縮短项滑，從而給浮動元素留出空間，文字框圍繞浮動元素涯贞。
清除浮動指什么? 如何清除浮動? 兩種以上方法
清除浮動不是不要浮動枪狂，而是清除浮動帶來的不利影響，以此來解決父元素高度塌陷現(xiàn)象宋渔。
解決方法：
- 添加一個div標簽州疾，設置clear:both能清除浮動，并撐開父元素皇拣。
- 使父容器形成BFC孝治。
有幾種定位方式，分別是如何實現(xiàn)定位的审磁，參考點是什么，使用場景是什么岂座？
- inherit
規(guī)定應該從父元素繼承 position 屬性的值态蒂。 - static
默認值,沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）费什。 - relative
生成相對定位的元素钾恢，相對于元素本身正常位置進行定位,因此手素，left:20px 會向元素的 left 位置添加20px。 - absolute
生成絕對定位的元素瘩蚪，相對于static定位以外的第一個祖先元素（offset parent）進行定位,元素的位置通過 left, top, right 以及 bottom 屬性進行規(guī)定泉懦。 - fixed
生成絕對定位的元素，相對于瀏覽器窗口進行定位疹瘦。元素的位置通過 left, top, right 以及 bottom 屬性進行規(guī)定崩哩。 - sticky
CSS3新屬性，表現(xiàn)類似position:relative和position:fixed的合體言沐，在目標區(qū)域在屏幕中可見時邓嘹，它的行為就像position:relative; 而當頁面滾動超出目標區(qū)域時，它的表現(xiàn)就像position:fixed险胰，它會固定在目標位置汹押。
z-index 有什么作用? 如何使用?
z-index 屬性指定一個元素的堆疊順序。
- z-index 值較大的元素將疊加在z-index值較小的元素之上起便。
- z-index屬性適用于定位元素（position 屬性值為 relative 或 absolute 或 fixed的對象）棚贾，用來確定定位元素在垂直于顯示屏方向（稱為Z軸）上的層疊順序。
- z-index只可比較同級元素榆综。
- z-index的默認值是auto妙痹，z-index設為0時，會產(chǎn)生堆疊順序奖年，z-index也可以設為負數(shù)细诸。
position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
- position:relative 是相對于自己本來的位置發(fā)生偏移，對其他文檔流元素無影響陋守。
- mairgin:負值 自身位置偏移震贵，也會影響文檔流元素。
BFC 是什么水评？如何生成 BFC猩系？BFC 有什么作用？舉例說明
BFC（Block Formatting Context）：塊格式化上下文中燥。它決定了元素如何對其內(nèi)容進行定位寇甸，以及與其他元素的關系和相互作用。BFC提供了一個環(huán)境疗涉，HTML元素在這個環(huán)境中按照一定規(guī)則進行布局拿霉。一個環(huán)境中的元素不會影響到其它環(huán)境中的布局。
生成BFC：
- 根元素
- float的值不為none
- overflow的值不為visible
- display的值為inline-block咱扣、table-cell绽淘、table-caption
- position的值為absolute或fixed
BFC作用：
- 不和浮動元素重疊
如果一個浮動元素后面跟著一個非浮動的元素，那么就會產(chǎn)生一個覆蓋的現(xiàn)象闹伪，很多自適應的兩欄布局就是這么做的沪铭。 - 清除元素內(nèi)部浮動
只要把父元素設為BFC就可以清理子元素的浮動壮池，最常見的用法就是在父元素上設置overflow: hidden樣式。 - 解決上下相鄰兩個元素重疊
將其中一個元素生成BFC能使上下相鄰兩元素不重疊杀怠。
在什么場景下會出現(xiàn)外邊距合并椰憋？如何合并？如何不讓相鄰元素外邊距合并赔退？給個父子外邊距合并的范例
外邊距合并指的是橙依，當兩個垂直外邊距相遇時，它們將形成一個外邊距离钝。
合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者票编。
- 當一個元素出現(xiàn)在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并卵渴。
-
當一個元素包含在另一個元素中時（假設沒有內(nèi)邊距或邊框把外邊距分隔開）慧域，它們的上和/或下外邊距也會發(fā)生合并。
- 外邊距甚至可以與自身發(fā)生合并浪读。
假設有一個空元素昔榴，它有外邊距，但是沒有邊框或填充碘橘。在這種情況下互订，上外邊距與下外邊距就碰到了一起，它們會發(fā)生合并
如果這個外邊距遇到另一個元素的外邊距痘拆，它還會發(fā)生合并
合并規(guī)則：
- 當兩個margin都是正數(shù)時仰禽，取兩者之中的較大者
- 當兩個margin都是負數(shù)時，取兩者之間絕對值較大者
- 當兩個margin一正一負時纺蛆，取的是兩者的和
只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并吐葵。行內(nèi)框、浮動框或絕對定位之間的外邊距不會合并桥氏。
