1、浮動(dòng)元素有什么特征潭辈？對父容器鸯屿、其他浮動(dòng)元素澈吨、普通元素、文字分別有什么影響?

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

3谅辣、有幾種定位方式，分別是如何實(shí)現(xiàn)定位的婶恼，參考點(diǎn)是什么桑阶，使用場景是什么？

4勾邦、z-index 有什么作用? 如何使用?

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

6、BFC 是什么检痰？如何生成 BFC包归？BFC 有什么作用？舉例說明

7铅歼、在什么場景下會(huì)出現(xiàn)外邊距合并公壤？如何合并？如何不讓相鄰元素外邊距合并椎椰？給個(gè)父子外邊距合并的范例

8厦幅、代碼

答案

1、

浮動(dòng)模型也是一種可視化格式模型慨飘，浮動(dòng)的框可以左右移動(dòng)（根據(jù)float屬性值而定）确憨，直到它的外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框的邊緣。浮動(dòng)元素不在文檔的普通流中瓤的，文檔的普通流中的元素表現(xiàn)的就像浮動(dòng)元素不存在一樣.
對父容器的影響：如果父容器的子元素都是浮動(dòng)元素休弃，那么父容器會(huì)失去高度，在浮動(dòng)元素之外圈膏。視覺上塔猾，父容器沒有包含住浮動(dòng)的子元素。
其它浮動(dòng)元素的影響：如果包含塊太窄無法容納水平排列的全部浮動(dòng)元素稽坤，那么其它浮動(dòng)元素會(huì)向下移動(dòng)丈甸，直到有足夠的空間，而如果浮動(dòng)元素的高度不同尿褪，那么向下移動(dòng)的時(shí)候可能會(huì)被卡住睦擂。
普通元素的影響：普通元素會(huì)視浮動(dòng)元素不見，占據(jù)浮動(dòng)元素原有的位置杖玲，但會(huì)被浮動(dòng)元素遮罩顿仇。
對文字的影響：文字會(huì)感知到浮動(dòng)元素的存在，會(huì)留出空間，形成環(huán)繞效果夺欲。

2跪帝、

清除浮動(dòng)是指結(jié)合clear屬性讓父元素在視覺上包圍浮動(dòng)元素。清除浮動(dòng)的方法：
（1） 在父元素的子元素最后添加一個(gè)空div些阅，并對其設(shè)置樣式：clear:both;
由于在子元素最后添加了空div，并清除了浮動(dòng)斑唬，因此父容器被撐開市埋。

<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>/

（2）利用BFC來清除浮動(dòng)。
因?yàn)锽FC可以包含浮動(dòng)恕刘，因此可以讓父元素生成一個(gè)新的BFC從而包圍浮動(dòng)的子元素缤谎。
可以對父元素設(shè)定以下樣式之一生成新BFC。
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;

<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>

(3)結(jié)合CSS特性的通用清除浮動(dòng)方案褐着，其本質(zhì)還是第1種方法坷澡。

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

/*方法2*/
  .clearfix{
    *zoom:1;
  }
  .clearfix:after{
    content:"";
      display:table;
      clear:both;
  }

3、

有幾種定位方式含蓉，分別是如何實(shí)現(xiàn)定位的频敛，參考點(diǎn)是什么，使用場景是什么馅扣？
（1）inherit
規(guī)定應(yīng)該從父元素繼承 position 屬性的值
（2）static
默認(rèn)值,沒有定位斟赚，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）
（3）relative
生成相對定位的元素，相對于元素本身正常位置進(jìn)行定位,因此差油，left:20px 會(huì)向元素的 left 位置添加20px
（4）absolute
生成絕對定位的元素拗军，相對于static定位以外的第一個(gè)祖先元素（offset parent）進(jìn)行定位,元素的位置通過 left, top,right 以及 bottom 屬性進(jìn)行規(guī)定
（5）fixed
生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位蓄喇。元素的位置通過 left, top, right
以及 bottom 屬性進(jìn)行規(guī)定
（6）sticky
CSS3新屬性发侵，表現(xiàn)類似position:relative和position:fixed的合體，在目標(biāo)區(qū)域在屏幕中可見時(shí)妆偏，它的行為就像position:relative; 而當(dāng)頁面滾動(dòng)超出目標(biāo)區(qū)域時(shí)刃鳄，它的表現(xiàn)就像position:fixed，它會(huì)固定在目標(biāo)位置

CSS有三種基本的定位機(jī)制：普通流楼眷，相對定位和絕對定位
普通流是默認(rèn)定位方式铲汪，在普通流中元素框的位置由元素在html中的位置決定，元素position屬性為static或繼承來的static時(shí)就會(huì)按照普通流定位罐柳，這也是我們最常見的方式
相對定位比較簡單掌腰，對應(yīng)position屬性的relative值，如果對一個(gè)元素進(jìn)行相對定位张吉，它將出現(xiàn)在他所在的位置上齿梁，然后可以通過設(shè)置垂直或水平位置，讓這個(gè)元素相對于它自己移動(dòng)，在使用相對定位時(shí)勺择，無論元素是否移動(dòng)创南，元素在文檔流中占據(jù)原來空間，只是表現(xiàn)出來的位置會(huì)改變

絕對定位與固定定位相對定位可以看作特殊的普通流定位省核，元素位置是相對于它在普通流中位置發(fā)生變化稿辙，而絕對定位使元素的位置與文檔流無關(guān)，也不占據(jù)文檔流空間气忠，普通流中的元素布局就像絕對定位元素不存在一樣

絕對定位的元素的位置是相對于距離最近的非static祖先元素位置決定的给郊。如果元素沒有已定位的祖先元素膀息，那么他的位置就相對于初始包含塊html來定位

因?yàn)榻^對定位與文檔流無關(guān)览闰，所以絕對定位的元素可以覆蓋頁面上的其他元素麻顶，可以通過z-index
fixed固定定位是屬于絕對定位中的一種。一般使用場景淘钟，例如：導(dǎo)航欄宦赠，右側(cè)工具欄，底部回到頂部按鈕等米母。它的定位是相對于瀏覽器的視窗口（viewport）來定的勾扭，而其他的絕對定位則是相遇于文檔（html）定位的。

4爱咬、

z-index 屬性指定一個(gè)元素的堆疊順序尺借。因?yàn)榻^對定位的元素脫離了普通流，所以絕對定位的元素可以覆蓋頁面上的其它元素精拟。這時(shí)可以通過給元素設(shè)置z-index屬性來控制疊放順序燎斩，擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
z-index有三個(gè)屬性
auto 默認(rèn)蜂绎。堆疊順序與父元素相等栅表。
number設(shè)置元素的堆疊順序。
inherit規(guī)定應(yīng)該從父元素繼承 z-index 屬性的值师枣。

5怪瓶、

position:relative;只相對自己原本位置發(fā)生偏移，不影響其它普通流中元素的位置践美。
margin：除了讓元素自身發(fā)生偏移還影響其它普通流中的元素洗贰。

6、

BFC(Block formatting context)直譯為"塊級格式化上下文"陨倡。它是一個(gè)獨(dú)立的渲染區(qū)域敛滋，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局兴革，并且與這個(gè)區(qū)域外部毫不相干绎晃。

BFC布局規(guī)則:
內(nèi)部的Box會(huì)在垂直方向蜜唾，一個(gè)接一個(gè)地放置;
Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊 每個(gè)元素的margin box的左邊庶艾， 與包含塊border box的左邊相接觸(對于從左往右的格式化袁余，否則相反)。即使存在浮動(dòng)也是如此;
BFC的區(qū)域不會(huì)與float box重疊;
BFC就是頁面上的一個(gè)隔離的獨(dú)立容器咱揍，容器里面的子元素不會(huì)影響到外面的元素颖榜。反之也如此;
計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算;

哪些元素會(huì)生成BFC?:
根元素;
float: left|right;
overflow: hidden|auto|scroll;
display: table-cell|table-caption|inline-block;
position: absolute|fixed;
BFC的作用有：
（1） 解決margin重疊問題述召。所謂margin重疊是指處于同一個(gè)BFC的相鄰元素朱转、嵌套元素，只要它們之間沒有阻擋（如：邊框积暖、非空內(nèi)容、padding等）就會(huì)發(fā)生margin重疊怪与。這是只要讓其中一個(gè)元素生成新的BFC就能解決margin重疊問題夺刑。
（2） 清除浮動(dòng)。因?yàn)锽FC可以包含浮動(dòng)分别，所以讓父容器生成新的BFC可以讓父容器在視覺上包圍了浮動(dòng)的子元素遍愿，因而清除了浮動(dòng)。

7耘斩、

外邊距合并指的是沼填，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，即當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)括授，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并坞笙。它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者荚虚。
父子外邊距合并的條件是父元素沒有邊框和padding隔開薛夜。形成BFC 可以阻止外邊柜合并，如上一題的給元素添加浮動(dòng)版述，絕對定位梯澜，inline-block,父子元素情況下，給父元素添加overflow不為none也可以阻止渴析。

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

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

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

這時(shí)兩個(gè)div在垂直距離上的外邊距進(jìn)行了合并晚伙，合并后的值是20px。
如果不想這樣俭茧，就在上一個(gè)元素里加一個(gè)：
display:inline-block;
阻止外邊距合并

為了阻止父子元素合并咆疗，父元素生成一個(gè)新的BFC, overflow, display...
給父元素加上一個(gè)邊框或者padding等..

8、

代碼1實(shí)現(xiàn)alert效果
代碼2實(shí)現(xiàn)表單效果
代碼3實(shí)現(xiàn)模態(tài)框效果
代碼4實(shí)現(xiàn)導(dǎo)航欄效果