浮動元素有什么特征母剥？對父容器滞诺、其他浮動元素、普通元素环疼、文字分別有什么影響?
- 浮動元素的特征：
（1）浮動元素會脫離正常的文檔流习霹。
（2）浮動元素后面的塊級元素的內(nèi)容會向此浮動元素的外邊距靠齊，但是邊框和背景卻忽略浮動元素而向上一個任意非浮動元素靠齊炫隶。
（3）浮動元素后面的內(nèi)聯(lián)元素會向此浮動元素的外邊距靠齊淋叶。
- 對父容器的影響
對于其父元素來說，元素浮動之后伪阶，它脫離當(dāng)前正常的文檔流煞檩，所以它也無法撐開其父元素，造成父元素的塌陷栅贴。
- 對其他浮動元素的影響
當(dāng)一個浮動元素在浮動過程中碰到同一個方向的浮動元素時斟湃，它會緊跟在它們后面。當(dāng)空間不夠時會被擠下
- 對普通元素的影響
塊級元素會忽視浮動元素的而占據(jù)它的位置檐薯，并且元素會處在浮動元素的下層（并且無法通過z-index屬性改變他們的層疊位置）凝赛，但它的內(nèi)部文字和其他行內(nèi)元素都會環(huán)繞浮動元素。
內(nèi)聯(lián)元素會環(huán)繞浮動元素排列坛缕。
- 對文字的影響
當(dāng)一個元素浮動時墓猎，在沒有清除浮動的情況下，它無法撐開其父元素祷膳，但它可以讓自己的浮動子元素?fù)伍_它自身陶衅，并且在沒有定義具體寬度情況下，使自身的寬度從100%變?yōu)樽赃m應(yīng)（浮動元素display:block）直晨。其高度和寬度均為浮動元素高度和非浮動元素高度之間的最大值搀军。
清除浮動指什么? 如何清除浮動? 兩種以上方法
- box模型里使用了浮動屬性膨俐，導(dǎo)致父級box模型不能被撐開。產(chǎn)生了背景不能顯示罩句，邊框不能撐開焚刺，margin padding設(shè)置值不能正確顯示等負(fù)作用。此時就需要清除浮動门烂。
（1）
clear:both
（2）
BFC特性：可以包含浮動乳愉。也就是說只要父容器形成BFC就可以，簡單看看如何形成BFC屯远。
- float為 left|right
- overflow為 hidden|auto|scroll
- display為 table-cell|table-caption|inline-block
- position為 absolute|fixed
（3）
.#:after{
content:"";
display:block;
clear:both;
有幾種定位方式蔓姚，分別是如何實現(xiàn)定位的，參考點是什么慨丐，使用場景是什么坡脐？
| 值 | 屬性 |
|---|---|
| inherit | 規(guī)定應(yīng)該從父元素繼承 position 屬性的值。 |
| static | 默認(rèn)值,沒有定位房揭，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）备闲。 |
| relative | 生成相對定位的元素，相對于元素本身正常位置進(jìn)行定位,因此捅暴，left:20px 會向元素的 left 位置添加20px恬砂。 |
| absolute | 生成絕對定位的元素，相對于static定位以外的第一個祖先元素（offset parent）進(jìn)行定位,元素的位置通過 left, top, right 以及 bottom 屬性進(jìn)行規(guī)定蓬痒。 |
| absolute相當(dāng)于脫離了文檔流泻骤，與浮動元素的區(qū)別是：absolute對下面的文本不會產(chǎn)生影響，浮動元素會影響下面的文本乳幸。 | |
| fixed | 生成絕對定位的元素瞪讼，相對于瀏覽器窗口進(jìn)行定位。元素的位置通過 left, top, right 以及 bottom 屬性進(jìn)行規(guī)定粹断。 |
| sticky | CSS3新屬性，表現(xiàn)類似position:relative和position:fixed的合體嫡霞，在目標(biāo)區(qū)域在屏幕中可見時瓶埋，它的行為就像position:relative; 而當(dāng)頁面滾動超出目標(biāo)區(qū)域時，它的表現(xiàn)就像position:fixed诊沪，它會固定在目標(biāo)位置养筒。 |
z-index 有什么作用? 如何使用?
z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面端姚。
該屬性僅適用于定位元素晕粪。即擁有 relative, absolute, fixed屬性的 position 元素
| 值 | 描述 |
|---|---|
| auto | 默認(rèn)。堆疊順序與父元素相等渐裸。 |
| number | 設(shè)置元素的堆疊順序巫湘。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 z-index 屬性的值装悲。 |
position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
- position:relative;：相對自己原本位置發(fā)生偏移，不影響其它普通流中元素的位置尚氛。
- 負(fù)margin：除了讓元素自身發(fā)生偏移還影響其它普通流中的元素诀诊。
BFC 是什么？如何生成 BFC阅嘶？BFC 有什么作用属瓣？舉例說明
BFC的全稱是 Block Format Content。直譯為"塊級格式化上下文"讯柔。它是一個獨立的渲染區(qū)域抡蛙，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局魂迄，并且與這個區(qū)域外部毫不相干溜畅。
生成BFC：
- float 為 left|right
- overflow 為 hidden|auto|scroll
- display 為 table-cell|table-caption|inline-block
- position 為 absolute|fixed
BFC作用：
- （1）BFC會阻止垂直外邊距（margin-top、margin-bottom）折疊极祸。
按照BFC的定義慈格，只有同屬于一個BFC時，兩個元素才有可能發(fā)生垂直Margin的重疊遥金，這個包括相鄰元素浴捆，嵌套元素，只要他們之間沒有阻擋(例如邊框稿械，非空內(nèi)容选泻，padding等)就會發(fā)生margin重疊。
- 因此要解決margin重疊問題美莫，只要讓它們不在同一個BFC就行了页眯，但是對于兩個相鄰元素來說，意義不大厢呵，沒有必要給它們加個外殼窝撵，但是對于嵌套元素來說就很有必要了，只要把父元素設(shè)為BFC就可以了襟铭。這樣子元素的margin就不會和父元素的margin發(fā)生重疊碌奉。
（2）BFC不會重疊浮動元素，用于自適應(yīng)兩欄布局寒砖。
（3）BFC可以包含浮動赐劣，清除內(nèi)部浮動。
在什么場景下會出現(xiàn)外邊距合并哩都？如何合并魁兼？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例漠嵌。
- 當(dāng)兩個塊元素垂直排列時咐汞，外邊距會合并盖呼。。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者碉考。
- 不合并情況：
（1）通過對父元素建立border塌计，padding，或者間隔侯谁。
（2）創(chuàng)建BFC可使得兩者不合并锌仅。
（3）浮動元素不合并。
（4）絕對定位元素不合并墙贱。
（5）根元素不合并热芹。
-
范例：
代碼1：http://js.jirengu.com/gikefocumo/1/
代碼2：http://js.jirengu.com/wecuzakiqu/1/
代碼3：http://js.jirengu.com/narijepeje/1/
代碼4：http://js.jirengu.com/quqokimeyu/1/
