浮動元素有什么特征？對父容器卸例、其他浮動元素称杨、普通元素、文字分別有什么影響?

• 特征：
  浮動元素會脫離文檔流筷转，使普通文檔流的元素?zé)o法識別浮動元素姑原，文檔的普通流中的元素表現(xiàn)的就像浮動元素不存在一樣。但是如果浮動的元素后面有一個(gè)文檔流中元素,那么這個(gè)元素的框會表現(xiàn)的像浮動元素不存在,但是框的文本內(nèi)容會受到浮動元素的影響,會移動以留出空間呜舒。元素設(shè)置為浮動之后锭汛，就生成一個(gè)塊級框（css行高提出的概念），沒必要再聲明display:block袭蝗，可以設(shè)置寬高唤殴。
• 影響：
  • 對父容器來說，浮動元素貼著父容器內(nèi)邊距排列到腥，父容器不會識別浮動元素朵逝，不會撐開父元素高度。
  • 對設(shè)置float的元素會相互識別乡范，對設(shè)置position元素配名，相互之間不會識別啤咽，position元素不會被任何元素都不會識別，包括文字段誊。
  • 普通元素?zé)o法識別浮動元素闰蚕，所以普通元素仍按照普通文檔流布局。

清除浮動指什么? 如何清除浮動?

清楚浮動的目的是解決父容器高度塌陷問題连舍。

• 清除浮動辦法：
  • 方法一：

  <div style="border: solid 5px #0e0; width:300px;">
    <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
    </div>
    <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
    </div>
    <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
    </div>
    <div style="clear:both;"></div>
  </div>
  

  • 方法二：
    使父元素成為一個(gè)BFC没陡，由于BFC的特性：可以包含浮動元素，所以達(dá)到了清除浮動的效果索赏。
  • 方法三：
    偽元素：

  .clearfix:after{
       content: "";
       display: block;
       clear: both;
  }
  

有幾種定位方式盼玄，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么潜腻，使用場景是什么埃儿？

z-index 有什么作用? 如何使用?

z-index 屬性指定了一個(gè)元素及其子元素的 z-order。 當(dāng)元素之間重疊的時(shí)候吼畏，z-order 決定哪一個(gè)元素覆蓋在其余元素的上方顯示督赤。 通常來說 z-index 較大的元素會覆蓋較小的一個(gè)。Z-index只能工作在被明確定義了absolute泻蚊，fixed或relative 這三個(gè)定位屬性的元素中躲舌。

對于一個(gè)已經(jīng)定位的元素（即position屬性值是非static的元素），z-index 屬性指定：

1. 元素在當(dāng)前堆疊上下文中的堆疊層級性雄。
2. 元素是否創(chuàng)建一個(gè)新的本地堆疊上下文没卸。

position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別?

• position: relative;是相對于自身的位置進(jìn)行偏移,原本所占的位置不會被其他元素占據(jù)羹奉；
• 負(fù)margin ： 自身在文檔流的位置也會隨著變化，會影響其他元素位置约计，可以被其他元素占據(jù)之前位置诀拭。

BFC 是什么？如何生成 BFC煤蚌？BFC 有什么作用耕挨？舉例說明

• BFC：一個(gè)塊格式化上下文（block formatting context） 是Web頁面的可視化CSS渲染的一部分。它是塊盒子的布局發(fā)生尉桩，浮動互相交互的區(qū)域筒占。

• 如何形成BFC：

  • float為 left|right
  • overflow為 hidden|auto|scroll
  • display為 table-cell|table-caption|inline-block
  • position為 absolute|fixed

• 作用：

  • BFC會阻止垂直外邊距（margin-top、margin-bottom）折疊
  • 按照BFC的定義蜘犁，只有同屬于一個(gè)BFC時(shí)翰苫，兩個(gè)元素才有可能發(fā)生垂直Margin的重疊，這個(gè)包括相鄰元素这橙，嵌套元素奏窑，只要他們之間沒有阻擋(例如邊框，非空內(nèi)容屈扎，padding等)就會發(fā)生margin重疊埃唯。
  • 因此要解決margin重疊問題，只要讓它們不在同一個(gè)BFC就行了助隧，但是對于兩個(gè)相鄰元素來說筑凫，意義不大滑沧，沒有必要給它們加個(gè)外殼并村，但是對于嵌套元素來說就很有必要了，只要把父元素設(shè)為BFC就可以了滓技。這樣子元素的margin就不會和父元素的margin發(fā)生重疊
  • BFC不會重疊浮動元素
  • BFC可以包含浮動

    <div style="border: solid 5px #0e0; width:300px;overflow:hidden;">
        <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
        </div>
    </div>

清除浮動撐開父元素的高度

在什么場景下會出現(xiàn)外邊距合并哩牍？如何合并？如何不讓相鄰元素外邊距合并令漂？父子外邊距合并的范例

外邊距合并指的是膝昆，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距叠必。
合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者荚孵。

只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并。行內(nèi)框纬朝、浮動框或絕對定位之間的外邊距不會合并

• 兩個(gè)兄弟元素在垂直方向上合并外邊距收叶，取較大值進(jìn)行合并。

#d1 {
  width:100px;
  height:100px;
  margin-bottom:20px;
}
#d2 {
  width:100px;
  height:100px;
  margin-top:10px;
}

<div id="d1">
</div>

<div id="d2">
</div>

1.gif

• 當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開）共苛，它們的上和/或下外邊距也會發(fā)生合并判没。

<div class=”parent”>
    <div class=”child”>
    </div>
</div>

.parent{
    width: 200px;
    height: 100px;
    margin-top:10px;
    background-color: red;
}
.child{
       width: 100px;
       height: 100px;
       margin-top:30px;
       background-color: yellow;
 }

2.gif

• 外邊距自己和自己合并
  如果一個(gè)元素沒有邊框和填充蜓萄，但有上下外邊距，這時(shí)它的上下外邊距會合并澄峰。

#d1 {
  margin-top:20px;
  margin-bottom:20px;
}
<div id="d1">
</div>

3.gif

• 元素垂直方向上的兄弟元素也有外邊距嫉沽，那么垂直方向的外邊距依舊會發(fā)生合并。

#d1 {
  margin-top:50px;
  margin-bottom:20px;
}

#d2 {
  width:100px;
  height:100px;
  margin-bottom: 80px;
}
<div id="d2">
</div>
<div id="d1">
</div>

4.gif

如何解決邊距重疊:

• 給對應(yīng)元素加上阻擋（例如border俏竞，非空內(nèi)容绸硕，padding等）
• 利用 BFC會阻止垂直外邊距折疊的特性，將對應(yīng)元素轉(zhuǎn)換為BFC來解決邊距重疊胞此。