浮動(dòng)元素有什么特征？對(duì)父容器、其他浮動(dòng)元素、普通元素、文字分別有什么影響?####

特征：浮動(dòng)模型也是一種可視化格式模型，浮動(dòng)的框可以左右移動(dòng)（根據(jù)float屬性值而定），直到它的外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框的邊緣。浮動(dòng)元素不在文檔的普通流中，文檔的普通流中的元素表現(xiàn)的就像浮動(dòng)元素不存在一樣
對(duì)其他浮動(dòng)元素的影響：包含框足夠?qū)?，與其他浮動(dòng)元素同一水平方向依次排列。如果包含框太窄，無(wú)法容納水平排列的3個(gè)浮動(dòng)元素，那么其他浮動(dòng)塊向下移動(dòng)，直到有足夠空間的地方。如果浮動(dòng)元素高度不同，那么當(dāng)它們向下移動(dòng)時(shí)可能會(huì)被其他浮動(dòng)元素卡住。
對(duì)普通元素的影響：浮動(dòng)元素之前的普通元素不受影響。浮動(dòng)元素之后的普通元素因感知不到浮動(dòng)元素的存在會(huì)被浮動(dòng)元素覆蓋。
對(duì)文字的影響：文字所在行框因?yàn)楦?dòng)元素的擠壓而縮短，從而圍繞浮動(dòng)元素排列。

清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法####

清除浮動(dòng)是指，當(dāng)設(shè)置浮動(dòng)元素時(shí)，緊鄰其后的元素會(huì)受到浮動(dòng)元素的影響，且其父元素可能出現(xiàn)高度塌陷，這樣可能會(huì)使布局錯(cuò)亂，所以我們需要想辦法來(lái)清除浮動(dòng)。

• 通過(guò)在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽例如 <div style=”clear:both”>
• 觸發(fā)父元素生成BFC，例如添加 overflow：hidden；樣式
• 通用方法：

. .clearfix{
      *zoom:1;
  }
  .clearfix:after{
      content:"";
      display:block;
      clear:left;
  }

有幾種定位方式，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么，使用場(chǎng)景是什么？####

static 默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

**relative **生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。還在文檔流中，原來(lái)所占用的位不會(huì)被其它元素所占有。如，"left:20" 會(huì)向元素的 LEFT 位置添加 20 像素。

absolute生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)祖先元素進(jìn)行定位。如果沒(méi)有這樣的祖先元素，則參照初始?jí)K即瀏覽器視口。
元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。

fixed生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。

CSS有三種基本的定位機(jī)制：普通流，相對(duì)定位和絕對(duì)定位。
普通流是默認(rèn)定位方式，在普通流中元素框的位置由元素在html中的位置決定，元素position屬性為static或繼承來(lái)的static時(shí)就會(huì)按照普通流定位，這也是最常見(jiàn)的方式。
相對(duì)定位對(duì)應(yīng)position屬性的relative值，如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在他所在的位置上，然后可以通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素相對(duì)于它自己移動(dòng)，在使用相對(duì)定位時(shí)，無(wú)論元素是否移動(dòng)，元素在文檔流中占據(jù)原來(lái)空間，只是表現(xiàn)出來(lái)的位置會(huì)改變。相對(duì)定位可以看作特殊的普通流定位，元素位置是相對(duì)于它在普通流中位置發(fā)生變化。
絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)，也不占據(jù)文檔流空間，普通流中的元素布局就像絕對(duì)定位元素不存在一樣。絕對(duì)定位的元素的位置是相對(duì)于距離最近的非static祖先元素位置決定的。如果元素沒(méi)有已定位的祖先元素，那么他的位置就相對(duì)于初始包含塊html來(lái)定位。

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

z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。z-index 僅能在定位元素上奏效（例如 position:absolute;），元素可擁有負(fù)的 z-index 屬性值。用法：z-index:3; z-index:auto;

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

position:relative是指相對(duì)于元素本身正常位置發(fā)生偏移，不影響其他普通流中元素的位置
margin除了讓元素自身發(fā)生偏移還影響其它普通流中的元素

BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說(shuō)明####

BFC 即 Block Formatting Contexts (塊級(jí)格式化上下文)，它屬于上述定位方案的普通流。具有 BFC 特性的元素可以看作是隔離了的獨(dú)立容器，容器里面的元素不會(huì)在布局上影響到外面的元素，并且 BFC 具有普通容器所沒(méi)有的一些特性。
能產(chǎn)生新的BFC的屬性：float的值不為none；overflow的值不為visible；display的值為table-cell, table-caption, inline-block中的任何一個(gè)；position的值不為relative和static。
BFC的作用：

1. 清除浮動(dòng)，只要把父元素設(shè)為BFC就可以清理子元素的浮動(dòng)了，最常見(jiàn)的用法就是在父元素上設(shè)置overflow: hidden樣式。

• 解決外邊距合并問(wèn)題，屬于同一個(gè)BFC的兩個(gè)相鄰盒子的margin會(huì)發(fā)生重疊，那么我們創(chuàng)建不屬于同一個(gè)BFC，就不會(huì)發(fā)生margin重疊了。
• 實(shí)現(xiàn)多欄布局，BFC的區(qū)域不會(huì)與浮動(dòng)盒子產(chǎn)生交集，而是緊貼浮動(dòng)邊緣。普通流體元素BFC后，為了和浮動(dòng)元素不產(chǎn)生任何交集，順著浮動(dòng)邊緣形成自己的封閉上下文。

在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例####

外邊距合并指的是，只有屬于同一個(gè)BFC時(shí)，兩個(gè)元素才有可能發(fā)生垂直margin的重疊，這個(gè)包括相鄰元素和嵌套元素，只要他們之間沒(méi)有阻擋，就會(huì)發(fā)生margin重疊。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。

• 上下相鄰的元素會(huì)出現(xiàn)外邊距(margin-bottom和margin-top)合并
  解決辦法：為其中一個(gè)元素設(shè)置新的BFC，例如設(shè)置float或者display:inline-block

1234123.png

• 父子元素的外邊距合并

解決方法：給父元素添加border或者padding 或者把父元素設(shè)成新的BFC，這樣子元素的margin就不會(huì)和父元素的margin重疊

設(shè)置border

添加overflow：auto;