BiliPala....

浮動元素的特征，對父容器、對其他浮動元素、普通元素、文字的影響。

• 浮動會使應(yīng)用的元素脫離文檔流。按指定的位置來移動位置。當(dāng)遇到其父元素或者相鄰的元素時即停下。此樣式可用于 塊級元素 或 行內(nèi)元素。
• 使用float浮動樣式的行內(nèi)元素，會跟使用inline-block樣式一樣可以設(shè)置寬高.

float 樣式版已經(jīng)脫離文檔流，能看到黃色父元素背景是因為添加了overflow..

• 默認(rèn)撐開文本內(nèi)容的高度。（沒內(nèi)容的話就顯示空白..不過只設(shè)置寬高背景色可以看到輪廓的。）

• 脫離了文檔流，那就意味著父元素?zé)o法感知到有該元素，那么即顯示沒有內(nèi)容時的默認(rèn)寬高（除非設(shè)置固定寬高 | 樣式）。

  
  
  float 會把元素擠到最前...

• 浮動后，會置頂，文字會環(huán)繞...

看圖...

清除浮動 & 清除浮動：

• 清除浮動不是不要浮動，而是清除浮動帶來的不利影響。另外，結(jié)合clear屬性也可讓父元素在視覺上包圍浮動元素。

• 至于清除浮動：

• 在父元素的子元素最后添加一個空div，并對其設(shè)置樣式：clear:both;
  由于在子元素最后添加了空div，并清除了浮動，因此父容器被撐開，實現(xiàn)了在視覺上包圍浮動元素的效果。（略顯浪費..）

• 利用BFC（后有介紹）來清除浮動：
  因為BFC可以包含浮動，因此可以讓父元素生成一個新的BFC從而包圍浮動的子元素。
  可以對父元素設(shè)定以下樣式之一生成新BFC。

`float: left | right;`
`overflow: hidden | auto | scroll;`
`display: table-cell | table-caption | inline-block;`
`position: absolute | fixed;`

• 結(jié)合CSS特性的通用清除浮動方案，其本質(zhì)還是第1種方法（通用）。

.clearfix {
      *zoom: 1;
   } 
                                     <!-- 隔行是總美 -->
.clearfix:after {
      content: "";
      display: block;
      clear: both;
}

幾種定位方式，如何實現(xiàn)定位，參考點，使用場景：

• inherit：從父元素繼承；
• static：默認(rèn)值，沒有定位，元素出現(xiàn)在正常的文檔流中。參考點是文檔流中的位置。
• relative：相對定位。相對于元素本來的位置進(jìn)行定位，通過top、bottom、left、right屬性來設(shè)置偏移量。使用場景：為絕對定位設(shè)定參照物或?qū)υ刈陨砦恢眠M(jìn)行局部調(diào)整。
• absolute：絕對定位的元素的位置是相對于距離最近的非static祖先元素位置決定的。如果元素沒有已定位的祖先元素，那么他的位置就相對于初始包含塊html來定位。使用場景：當(dāng)想讓元素參照特定參照物進(jìn)行定位時使用。
• fixed：固定定位。生成絕對定位元素，相對于屏幕窗口（viewport）進(jìn)行定位。
• sticky：對象在常態(tài)時遵循普通流。它就像是relative和fixed的合體，當(dāng)在屏幕中時按常規(guī)流排版，當(dāng)卷動到屏幕外時則表現(xiàn)如fixed。（CSS3 產(chǎn)物。兼容性現(xiàn)在好多了...）

Sticky兼容性

z-index 作用 & 使用.

因為絕對定位的元素脫離了普通流，所以絕對定位的元素可以覆蓋頁面上的其它元素。這時可以通過給元素設(shè)置z-index屬性來控制疊放順序，該屬性值越高，元素位置越靠上。

實操最要緊

position:relative 和 負(fù)margin 可以使元素位置發(fā)生偏移，區(qū)別：

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

margin后面的元素也會跟進(jìn)...

BFC （Block formatting contexts）

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

• BFC的通俗理解：
  首先BFC是一個名詞，是一個獨立的布局環(huán)境，我們可以理解為一個箱子（實際上是看不見摸不著的），箱子里面物品的擺放是不受外界的影響的。轉(zhuǎn)換為BFC的理解則是：BFC中的元素的布局是不受外界的影響（我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。）并且在一個BFC中，塊盒與行盒（行盒由一行中所有的內(nèi)聯(lián)元素所組成）都會垂直的沿著其父元素的邊框排列。

添加創(chuàng)建：

• 浮動，絕對定位元素，inline-blocks, table-cells, table-captions,和overflow的值不為visible的元素，（除了這個值已經(jīng)被傳到了視口的時候）將創(chuàng)建一個新的塊級格式化上下文

• 上面的引述幾乎總結(jié)了一個BFC是怎樣形成的。但是讓我們以另一種方式來重新定義以便能更好的去理解。一個BFC是一個HTML盒子并且至少滿足下列條件中的任何一個：

• float的值不為none.

• position的值不為static或者relative.

• display的值為 table-cell, table-caption,inline-block, 或者 inline-flex中的其中一個.

• overflow的值不為visible.

• 一個BFC可以被顯式的觸發(fā)。如果想要創(chuàng)建一個新的BFC，只需要給它添加上面提到的任何一個CSS樣式就可以了。

• 一個新的BFC可以通過給容器添加任何一個觸發(fā)BFC的CSS樣式，如overflow: scroll, overflow: hidden, display: flex, float: left,或者 display: table來創(chuàng)建。

• display:table可能會產(chǎn)生一些問題

• overflow:scroll可能會顯示不必要的滾動條

• float:left將會把元素置于容器的左邊，其他元素環(huán)繞著它

• overflow:hidden將會剪切掉溢出的元素

• 所以每當(dāng)想要創(chuàng)建一個新的BFC的時候，我們會基于我們的需求選擇最好的樣式條件。

運(yùn)用場景：

• 假設(shè)，一個 div容器 它設(shè)置了浮動...那么此時它的父元素是不會有任何高度的，它將不會去包含已經(jīng)浮動的子元素，那么此時可以通過給其添加一個 overflow：hidden，在容器中創(chuàng)建一個新的BFC。那么這個將包含浮動的子元素，它的高度可擴(kuò)展到可以包含它的子元素，這些元素會回到頁面的常規(guī)文檔流。

• 有時候一個浮動div周圍的文字環(huán)繞著它（如下圖中的左圖所示）但是在某些案例中這并不是可取的，我們想要的是外觀跟下圖中的右圖一樣的。為了解決這個問題，我們可能使用外邊距，但是我們也可以使用一個BFC來解決。

image.png

• 還可以在多列布局中使用BFC
  如果我們正在創(chuàng)建的一個多列布局占滿了整個容器的寬度，在某些瀏覽器中最后一列有時候?qū)粩D到下一行。會發(fā)生這樣可能是因為瀏覽器舍入（取整）了列的寬度使得總和的寬度超過了容器的寬度。然而，如果我們在一個列的布局中建立了一個新的BFC，它將會在前一列填充完之后的后面占據(jù)所剩余的空間。

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

• 合并外邊距與BFC
  在CSS當(dāng)中，相鄰的兩個盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距。

• 折疊的結(jié)果：
  兩個相鄰的外邊距都是正數(shù)時，折疊結(jié)果是它們兩者之間較大的值。
  兩個相鄰的外邊距都是負(fù)數(shù)時，折疊結(jié)果是兩者絕對值的較大值。
  兩個外邊距一正一負(fù)時，折疊結(jié)果是兩者的相加的和。

• 產(chǎn)生折疊的必備條件：margin必須是鄰接的!
  而根據(jù)w3c規(guī)范，兩個margin是鄰接的必須滿足以下條件：

• 必須是處于常規(guī)文檔流（非float和絕對定位）的塊級盒子,并且處于同一個BFC當(dāng)中。

• 沒有線盒，沒有空隙（clearance），沒有padding和border將他們分隔開

• 都屬于垂直方向上相鄰的外邊距，可以是下面任意一種情況元素的margin-top與其第一個常規(guī)文檔流的子元素的margin-top

• 元素的margin-bottom與其下一個常規(guī)文檔流的兄弟元素的margin-top

• height為auto的元素的margin-bottom與其最后一個常規(guī)文檔流的子元素的margin-bottom

• 高度為0并且最小高度也為0，不包含常規(guī)文檔流的子元素，并且自身沒有建立新的BFC的元素的margin-top和margin-bottom

• 以上的條件意味著下列的規(guī)則：
• 創(chuàng)建了新的BFC的元素（例如浮動元素或者'overflow'值為'visible'以外的元素）與它的子元素的外邊距不會折疊
• 浮動元素不與任何元素的外邊距產(chǎn)生折疊（包括其父元素和子元素）
• 絕對定位元素不與任何元素的外邊距產(chǎn)生折疊
• inline-block元素不與任何元素的外邊距產(chǎn)生折疊
• 一個常規(guī)文檔流元素的margin-bottom與它下一個常規(guī)文檔流的兄弟元素的margin-top會產(chǎn)生折疊，除非它們之間存在間隙（clearance）。
• 一個常規(guī)文檔流元素的margin-top 與其第一個常規(guī)文檔流的子元素的margin-top產(chǎn)生折疊，條件為父元素不包含 padding 和 border ，子元素不包含 clearance。
• 一個 'height' 為 'auto' 并且 'min-height' 為 '0'的常規(guī)文檔流元素的 margin-bottom 會與其最后一個常規(guī)文檔流子元素的 margin-bottom 折疊，條件為父元素不包含 padding 和 border ，子元素的 margin-bottom 不與包含 clearance 的 margin-top 折疊。
• 一個不包含border-top、border-bottom、padding-top、padding-bottom的常規(guī)文檔流元素，并且其 'height' 為 0 或 'auto'， 'min-height' 為 '0'，其里面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 會折疊。

• 浮動和絕對定位不與任何元素產(chǎn)生 margin 折疊

• inline-block元素與其兄弟元素、子元素和父元素的外邊距都不會折疊（包括其父元素和子元素）

參考傳送門: ??
**參考傳送門: **??