一镣隶、浮動元素有什么特征极谊？對父容器、其他浮動元素安岂、普通元素轻猖、文字分別有什么影響?
- （對浮動元素）浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止嗜闻。
- （對普通元素）由于浮動框不在文檔的普通流中蜕依，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。
- （對父容器）如果父容器（包容塊）太窄無法容納水平排列的三個浮動元素琉雳，那么其它浮動塊下移样眠，直到有足夠的空間；如果浮動元素高度不同翠肘，那么下移可能會被卡组苁；也會造成父容器高度塌陷束倍。
- （對文字）浮動框旁邊的行框被縮短被丧，從而給浮動框留出空間盟戏，行框圍繞浮動框。因此甥桂，創(chuàng)建浮動框可以使文本圍繞圖像柿究，即文字可以感應浮動框。
詳情示例請戳
二黄选、清除浮動指什么? 如何清除浮動? 兩種以上方法
（1）解決浮動父容器高度塌陷問題
（2）清除浮動的方法
- 利用clear屬性來清除浮動蝇摸，最常見clear：both清除左右兩邊的浮動
.clearfix{
*zoom:1;
}
. clearfix:after{
content:"";
display:block;
clear:left;
} - 利用overflow來清除浮動，我們可以使用hiddent和auto值來清除浮動办陷，但切記不能使用visible值（BFC清除浮動）
.over-flow{
overflow: auto; zoom: 1; //zoom: 1; 是在處理兼容性問題
} - :after 方法：（注意：作用于浮動元素的父親）
.outer {zoom:1;} /==for IE6/7 Maxthon2==/
.outer:after {clear:both;
content:'.';
display:block;
width: 0;height:0;
visibility:hidden;}
擴展1貌夕，浮動的幾種影響
擴展2，清除浮動的兩種常見方法
三民镜、有幾種定位方式啡专，分別是如何實現(xiàn)定位的，參考點是什么制圈，使用場景是什么们童？
(1)position:static
默認值。沒有定位离唐，元素出現(xiàn)在正常的流中
(2)position:relative
生成相對定位的元素病附，相對于其正常位置進行定位。因此亥鬓，"left:20" 會向元素的 LEFT 位置添加 20 像素完沪。元素仍保持其未定位前的形狀，它原本所占的空間仍保留嵌戈。
(3)position:absolute
生成絕對定位的元素覆积，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定熟呛。
元素框從文檔流完全刪除宽档，元素原先在正常文檔流中所占的空間會關(guān)閉，就好像元素原來不存在一樣庵朝。
(4)position:fixed
生成絕對定位的元素吗冤，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定九府。
使用場景：永遠在窗口頂部或底部的元素
(5)position:inherit
規(guī)定應該從父元素繼承 position 屬性的值
提示：相對定位實際上被看作普通流定位模型的一部分椎瘟，因為元素的位置相對于它在普通流中的位置。
四侄旬、z-index 有什么作用? 如何使用?
Z-index屬性決定了一個HTML元素的層疊級別肺蔚。
當網(wǎng)頁上出現(xiàn)多個由position：relative、絕對定位（position：absolute）或固定定位（position：fixed）所產(chǎn)生的浮動層時儡羔，必然有層疊順序宣羊，這是z-index就起到了作用璧诵，值越大，優(yōu)先級越高仇冯。
擴展：深入理解CSS中的層疊上下文和層疊順序
五之宿、position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative：只相對自己原本位置發(fā)生偏移，不影響其它普通流中元素的位置赞枕，即改變位置后澈缺，它的本體位置并沒有改變，瀏覽器中的其它元素感知的還是它原本的位置炕婶；
負margin改變位置后，本體隨之改變莱预，其周邊普通流元素可能也會隨之改變
六柠掂、BFC 是什么？如何生成 BFC依沮？BFC 有什么作用涯贞？舉例說明
（1）（2）參考來源：請戳
（1）BFC（Block formatting contexts），翻譯過來就是塊級格式化上下文
（2）根據(jù)W3C的定義：浮動元素危喉，絕對定位元素宋渔，非塊級盒子的塊級容器（例如inline-blocks，table-cells辜限，and table-captions）皇拣，以及overflow屬性值不是“ visible”（visible是overflow的默認值）的塊級盒子（視口除外），這些元素就會為他們的內(nèi)容創(chuàng)建一個BFC薄嫡。
（3）BFC布局規(guī)則：
- 內(nèi)部的Box會在垂直方向氧急，一個接一個地放置。
- Box垂直方向的距離由margin決定毫深。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
- 每個元素的margin box的左邊吩坝， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)哑蔫。即使存在浮動也是如此中狂。
- BFC的區(qū)域不會與float box重疊。
- BFC就是頁面上的一個隔離的獨立容器梆靖，容器里面的子元素不會影響到外面的元素闯两。反之也如此。
- 計算BFC的高度時稿黍，浮動元素也參與計算
參考來源：請戳
（4）BFC的三個特性（作用）
- 會阻止垂直外邊距（margin-top疹瘦，margin-bottom）合并
- 按照BFC定義，只有同屬于一個BFC時巡球，兩個元素才有可能發(fā)生垂直margin的重疊言沐。包括相鄰元素邓嘹，嵌套元素，只要他們周邊沒有發(fā)生阻擋（例如邊框险胰，非空內(nèi)容汹押，padding等）就會發(fā)生，margin重疊
- 因此起便，要解決重疊問題只需要使他們在不同的BFC就可以了棚贾。但是，相鄰元素意義不大榆综，但對嵌套元素來說非常必要妙痹，只需設(shè)置父容器為BFC
- 案例見第七點
- BFC不會重疊浮動元素
-
兩欄布局的情況下
浮動重疊.png
BFC不會重疊浮動元素.png
-
-
BFC可以包含浮動元素
沒有包含浮動
創(chuàng)建BFC，包含浮動
七鼻疮、在什么場景下會出現(xiàn)外邊距合并怯伊？如何合并？如何不讓相鄰元素外邊距合并判沟？給個父子外邊距合并的范例
塊的頂部外邊距和底部外邊距有時被組合(折疊)為單個外邊距耿芹，其大小是組合到其中的最大外邊距，這種行為稱為外邊距塌陷(margin collapsing)挪哄，有的地方翻譯為外邊距合并吧秕。
-
發(fā)生外邊距塌陷的三種基本情況:
-
相鄰的兄弟姐妹元素
外邊距合并-相鄰情況 -
塊級父元素與其第一個/最后一個子元素
如果塊級父元素中，不存在上邊框迹炼、上內(nèi)邊距砸彬、內(nèi)聯(lián)元素、清除浮動
這四條屬性（即不存在創(chuàng)建BFC的情況）疗涉，那么這個塊級元素和其第一個子元素的上邊距就可以說”挨到了一起“拿霉。此時這個塊級父元素和其第一個子元素就會發(fā)生上外邊距合并現(xiàn)象，換句話說咱扣，此時這個父元素對外展現(xiàn)出來的外邊距將直接變成這個父元素和其第一個子元素的margin-top的較大者绽淘。
外邊距合并-父子情況 -
空塊元素
<p style="margin-bottom: 0px;background:pink">這個段落的和下面段落的距離將為20px</p>
<div style="margin-top: 20px; margin-bottom: 20px;"></div>
<p style="margin-top: 0px;background:pink">這個段落的和上面段落的距離將為20px</p>
空塊元素
-
即使外邊距為0，這些規(guī)則也仍舊生效闹伪。因此沪铭，無論父元素的外邊距是否為0，第一個或者最后一個子元素的外邊距會被父元素的外邊距"截斷"(根據(jù)上面的規(guī)則)偏瓤。
當有負邊距存在時杀怠，合并后的外邊距將是最大正邊距加上最小負邊距（即負邊距中絕對值最大的一個）。
參考來源：mdn,外邊距合并-
解決辦法：
利用：絕對定位厅克，float赔退，inline-block，overflow（除visible值），table-cell可以阻止外邊距合并
