浮動元素有什么特征？
- 元素浮動之后不占據(jù)原來的位置
- 浮動的盒子在一行上顯示
- 行內(nèi)元素浮動之后轉(zhuǎn)換為具備有塊級元素的特征，可以設(shè)置寬高
浮動元素對父容器、其他浮動元素、普通元素、文字分別有什么影響?
- 如果父容器的子元素都是浮動元素，如果父容器沒有定義高度，那么父容器會失去高度，在浮動元素之外。
- 對于普通元素，普通元素會感知不到浮動元素當(dāng)然存在，如果寬高合適，后面的元素會占據(jù)浮動元素原來的位置
- 對于文字來說，能感知到浮動元素的存在，如果位置足夠，就能夠?qū)崿F(xiàn)文本繞圖的效果
清除浮動指什么? 如何清除浮動? 兩種以上方法
清除浮動不是不要浮動，而是清楚浮動帶來的不利影響
- 使父元素形成新的BFC，可以使用
overflow：hidden/auto/scroll``display:inline-blockfloat:方位等等 - 使用偽元素清楚浮動(解決父容器浮動元素影響),如
.clearfix{zoom:1;}
或者.clearfix:after{ content:"";display:block;visible:hidden;clear:both;} - 使用clear屬性
clear: both;解決周圍浮動元素影響.
然后在需要清除浮動的元素進行調(diào)用。
有幾種定位方式，分別是如何實現(xiàn)定位的，參考點是什么，使用場景是什么？
inherit 規(guī)定應(yīng)該從父元素繼承 position 屬性的值
static默認值,沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）
relative生成相對定位的元素，相對于元素本身正常位置進行定位,因此，left:20px會向元素的 left 位置添加20px(即向右偏移20px)
absolute生成絕對定位的元素，相對于static定位以外的第一個祖先元素（offset parent）進行定位,元素的位置通過 left, top, right以及 bottom 屬性進行規(guī)定
fixed生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 left, top, right 以及 bottom 屬性進行規(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)位置普通流與相對定位
CSS有三種基本的定位機制：普通流，相對定位和絕對定位．普通流是默認定位方式，在普通流中元素框的位置由元素在html中的位置決定，元素position屬性為static或繼承來的static時就會按照普通流定位，這也是我們最常見的方式相對定位比較簡單，對應(yīng)position屬性的relative值，如果對一個元素進行相對定位，它將出現(xiàn)在他所在的位置上，然后可以通過設(shè)置垂直或水平位置，讓這個元素相對于它自己移動，在使用相對定位時，無論元素是否移動，元素在文檔流中占據(jù)原來空間，只是表現(xiàn)出來的位置會改變.
絕對定位與固定定位相對定位可以看作特殊的普通流定位，元素位置是相對于它在普通流中位置發(fā)生變化，而絕對定位使元素的位置與文檔流無關(guān)，也不占據(jù)文檔流空間，普通流中的元素布局就像絕對定位元素不存在一樣
絕對定位的元素的位置是相對于距離最近的非static祖先元素位置決定的。如果元素沒有已定位的祖先元素，那么他的位置就相對于初始包含塊html來定位
因為絕對定位與文檔流無關(guān)，所以絕對定位的元素可以覆蓋頁面上的其他元素，可以通過z-index
z-index 有什么作用? 如何使用?
-
z-index屬性指定一個元素的堆疊順序。因為絕對定位的元素脫離了普通流，所以絕對定位的元素可以覆蓋頁面上的其它元素。這時可以通過給元素設(shè)置z-index屬性來控制疊放順序，擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。 -
z-index有三個屬性auto默認,堆疊順序與父元素相等。number設(shè)置元素的堆疊順序。inherit規(guī)定應(yīng)該從父元素繼承z-index屬性的值。
position:relative和-margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative;只相對自己原本位置發(fā)生偏移，不影響其它普通流中元素的位置。-margin：除了讓元素自身發(fā)生偏移還影響其它普通流中的元素。
BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
- BFC是指塊級元素格式化，在同一個BFC中，元素會遵守一些規(guī)則，如從上到下排列，邊距合并等，如果是相鄰兩個元素分別處于兩個BFC當(dāng)中，則一般不會遵循這些規(guī)則。
- 形成新的BFC，可以使用
overflow：hidden/auto/scroll``display:inline-blockfloat:方位position - 作用：（1） 解決margin重疊問題，在同一個BFC中，相鄰元素之間的邊距會合并，如果把這兩個元素分別放在兩個BFC中，那么他們的邊距就不會合并。一般應(yīng)用于嵌套關(guān)系。（2）清除浮動。BFC不會重疊浮動元素。
在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
- 出現(xiàn)合并的場景：根據(jù)BFC的定義，只有同屬一個BFC時，兩個元素才有可能發(fā)生垂直margin的重疊，這個包括相鄰元素，嵌套元素(只要他們之間沒有阻擋（例如邊框，非空內(nèi)容，padding等)）就會發(fā)生marging重疊
- 合并的類型有：相鄰兄弟元素外邊距合并；父子元素外邊距合并 ；非兄弟非父子元素外邊距合并；自身外邊距合并（content為0，上下margin產(chǎn)生合并）
- 如何合并：兩個相鄰的外邊距都是正數(shù)時，折疊結(jié)果是它們兩者之間較大的值;兩個相鄰的外邊距都是負數(shù)時，折疊結(jié)果是兩者絕對值的較大值;兩個外邊距一正一負時，折疊結(jié)果是兩者的相加的和
- 如何不讓相鄰元素合并：為父元素設(shè)置 BFC 或 padding 或 border ;兄弟元素間設(shè)置 float 或 inline-block 或 absolute.
body{ width:300px; height:300px; border:1px solid; } .parent{ background:yellow; margin-top:10px; } .child{ background:red; margin-top:30px; } <body><div class="parent"><div class="child">紅色</div></div></body>
這時候你外邊距是合并的
而在父元素加display：inline-block；這時候就會形成一個新的BFC，邊距不會合并。例子1.parent{background: yellow;margin-top:30px; display: inline-block;}.child{background:red;margin:50px; }
代碼1----> 參考
代碼2---->參考
代碼3---->參考
代碼4---->參考
