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

• 浮動模型也是一種可視化格式模型，浮動的框可以左右移動（根據(jù)float屬性值而定），直到它的外邊緣碰到包含框或者另一個(gè)浮動元素的框的邊緣。浮動元素不在文檔的普通流中，文檔的普通流中的元素表現(xiàn)的就像浮動元素不存在一樣.

• 對父容器的影響：如果父容器的子元素都是浮動元素，那么父容器會失去高度，在浮動元素之外。視覺上，父容器沒有包含住浮動的子元素。本次任務(wù)的最后一個(gè)代碼通過在父容器內(nèi)新增一個(gè)塊級普通流元素使父容器撐起所有元素
• 其它浮動元素的影響：如果包含塊太窄無法容納水平排列的全部浮動元素，那么其它浮動元素會向下移動，直到有足夠的空間，而如果浮動元素的高度不同，那么向下移動的時(shí)候可能會被卡住。
• 普通元素的影響：普通元素會視浮動元素不見，占據(jù)浮動元素原有的位置，但會被浮動元素遮罩。
• 對文字的影響：文字會感知到浮動元素的存在，會留出空間，形成環(huán)繞效果。

清除浮動指什么? 如何清除浮動? 兩種以上方法

• 清除浮動就是解決父容器高度塌陷問題，通俗來講就是使父容器在視覺上包裹住子元素，可以在父容器的最后面新增一個(gè)元素，也可以：

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


  /*方法2*/
  .clearfix{
    *zoom:1;
  }
  .clearfix:after{
    content:"";
      display:table;
      clear:both;/*原理類似于給父容器內(nèi)部最底端新增一個(gè)元素*/
  }

雖然我們得出了一種瀏覽器兼容的靠譜解決方案，但這并不代表我們一定得用這種方式，很多時(shí)候我們的父容器本身需要position：absolute等形成了BFC的時(shí)候我們可以直接利用這些屬性了，總而言之清理浮動兩種方式：利用 clear屬性、使父容器形成BFC

• BFC清理浮動

• 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可以包含浮動
  可以利用“BFC可以包含浮動”這一特性來“清浮動”，這里其實(shí)說清浮動已經(jīng)不再合適，應(yīng)該說包含浮動。也就是說只要父容器形成BFC就可以，以下幾種方式可以形成BFC

• float為 left|right
• overflow為 hidden|auto|scroll
• display為 table-cell|table-caption|inline-block
• position為 absolute|fixed
  對父容器添加一些屬性可以形成BFC達(dá)到“清浮動”效果，例如：

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

用BFC使用float的時(shí)候會使父容器長度縮短，而且還有個(gè)重要缺陷——父容器float解決了其塌陷問題，那么父容器的父容器怎么辦？overflow屬性會影響滾動條和絕對定位的元素；position會改變元素的定位方式，這是我們不希望的，display這幾種方式依然沒有解決低版本IE問題
IE6、7內(nèi)有個(gè)hasLayout的概念，當(dāng)元素的hasLayout屬性值為true的時(shí)候會達(dá)到和BFC類似的效果，元素負(fù)責(zé)本身及其子元素的尺寸設(shè)置和定位。 下面這些設(shè)置可以使元素hasLayout為true
position: absolute
float: left|right
display: inline-block
width: 除 “auto” 外的任意值
height: 除 “auto” 外的任意值
zoom: 除 “normal” 外的任意值
writing-mode: tb-rl
在IE7中使用overflow: hidden|scroll|auto 也可以使hasLayout為true

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

fixed
固定定位，參照位置是瀏覽器窗口的左上角，即坐標(biāo)點(diǎn)為(0px, 0px)
absolute
絕對定位，參展位置是離當(dāng)前元素最近的定位方式為fixed,absolute,relative的祖先原則的左上角

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

在 CSS 2.1中, 所有的盒模型元素都處于三維坐標(biāo)系中。 除了我們常用的橫坐標(biāo)和縱坐標(biāo)， 盒模型元素還可以沿著“z軸”層疊擺放， 當(dāng)他們相互覆蓋時(shí)， z軸順序就變得十分重要
這意味著其實(shí)CSS允許你在現(xiàn)有的渲染引擎上層疊的擺放盒模型元素。 所有的層都可以用一個(gè)整數(shù)(z軸順序)來表明當(dāng)前層在z軸的位置。 數(shù)字越大， 元素越接近觀察者。Z軸順序用CSS的z-index
屬性來指定。
要特別注意：
z-index僅在設(shè)置了position非static屬性的元素生效
z-index的值只能在兄弟元素之間比較
z-index默認(rèn)值為auto，則不建立層疊上下文。設(shè)置為0則會建立層疊上下文

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

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

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

浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內(nèi)容創(chuàng)建新的BFC（塊級格式上下文）。
在BFC中，盒子從頂端開始垂直地一個(gè)接一個(gè)地排列，兩個(gè)盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個(gè)BFC中，兩個(gè)相鄰的塊級盒子的垂直外邊距會產(chǎn)生折疊。
在BFC中，每一個(gè)盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對于從右到左的格式來說，則觸碰到右邊緣）。

• 對元素設(shè)置以下屬性就可以生成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等）就會發(fā)生margin重疊。這是只要讓其中一個(gè)元素生成新的BFC就能解決margin重疊問題。
  （2） 清除浮動。因?yàn)锽FC可以包含浮動，所以讓父容器生成新的BFC可以讓父容器在視覺上包圍了浮動的子元素，因而清除了浮動

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

• 當(dāng)同屬于一個(gè)BFC時(shí)，兩個(gè)元素有可能發(fā)生垂直Margin的重疊，這個(gè)包括相鄰元素，嵌套元素，只要他們之間沒有阻擋(例如邊框，非空內(nèi)容，padding等)就會發(fā)生margin重疊

image.png

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

image.png

• 外邊距自己和自己合并，取較大值進(jìn)行合并

image.png

image.png

特別地，

• 當(dāng) margin 都是負(fù)值的時(shí)候，取的是其中絕對值較大的，然后，從0位置，負(fù)向位移；
• 當(dāng)有正有負(fù)的時(shí)候，先取出負(fù) margin 中絕對值中最大的，然后，和正 margin 值中最大的 -
  margin 相加。
• 所有毗鄰的margin要一起參與運(yùn)算，不能分步進(jìn)行。

代碼1

代碼2

代碼3

代碼4