浮動元素的特征及影響
- 特征：
- 浮動模型也是一種可視化格式模型，浮動的框可以左右移動（根據(jù)float屬性值而定），直到它的外邊緣碰到包含框（父元素的border邊界）或者另一個浮動元素的框的邊緣。
- 浮動元素不在文檔的普通流中，文檔的普通流中的元素表現(xiàn)的會像浮動元素不存在一樣，會被覆蓋；但其中的文本會“感覺到”，被“擠”開。
覆蓋和擠開.png
- 若多個浮動元素寬度超過父容器邊框?qū)挾葧r，超過的浮動元素會向下移動，下移的距離即上一個浮動元素的高度。若其上一個浮動元素的高度并不是前面那些浮動元素之中最高的，會出現(xiàn)“卡住”的現(xiàn)象。
2.png
- 若浮動元素的父元素（父容器）沒有設(shè)置高度，其同級元素又都是浮動元素，則父元素會發(fā)生高度塌陷。
高度塌陷.png
- 影響：
- 對父容器：若同級元素全為浮動元素，且父容器沒有設(shè)置高度，則父容器高度塌陷。
- 對其他元素： 無視浮動元素而位置重疊，進而被浮動元素覆蓋。
- 對文字：文字會“感覺到”浮動元素的存在，環(huán)繞浮動元素。
- 對其他浮動元素： 多個浮動元素依屬性按html順序浮動，若父容器寬度不夠，則多出的浮動元素下移（下移高度為前一個浮動元素高度）并繼續(xù)依屬性偏移。
清除浮動
- 在非IE瀏覽器（如Firefox）下，當(dāng)容器的高度為auto，且容器的內(nèi)容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應(yīng)內(nèi)容的高度，使得內(nèi)容溢出到容器外面而影響（甚至破壞）布局的現(xiàn)象。這個現(xiàn)象叫浮動溢出，為了防止這個現(xiàn)象的出現(xiàn)而進行的CSS處理，就叫CSS清除浮動。
- 如何清除浮動：
- 使用帶clear屬性的空元素。
在浮動元素后使用一個空元素如<div class="clear"></div>，并在CSS中賦予.clear{clear:both;}屬性即可清理浮動。亦可使用<br class="clear" />或<hr class="clear" />來進行清理。
4.png
優(yōu)點：簡單，代碼少，瀏覽器兼容性好。
缺點：需要添加大量無語義的html元素，代碼不夠優(yōu)雅，后期不容易維護。
- 形成BFC（后文有詳解）。
給含有浮動元素的父容器設(shè)置一些屬性，如：
| 屬性 | 值 |
|---|---|
| float | left ; right |
| overflow | hidden ; auto ; scroll |
| display | table-cell ; table-caption ; inlin-block |
| position | absolute ; fixed |
而具有BFC屬性的父元素具有包含浮動元素的能力，即達到清除浮動的目的。
優(yōu)點：不存在結(jié)構(gòu)和語義化問題，代碼量極少。
缺點：根據(jù)使用屬性的不同可能會出現(xiàn)一些預(yù)期之外的其他情況，或多或少有副作用。
- 通用方案（使用偽元素選擇器）。
給父容器加上一個class（eg: clearfix），然后CSS中使用如下代碼：
.clearfix:after {
content: "\200B";
display: block;
clear: both;
height: 0;
}
.clearfix {
*zoom:1;
}
偽元素法.png
優(yōu)點：結(jié)構(gòu)和語義化完全正確,代碼量居中。
缺點：復(fù)用方式不當(dāng)會造成代碼量增加。
PS：
- display:block 使生成的元素以塊級元素顯示,占滿剩余空間;
- height:0 避免生成內(nèi)容破壞原有布局的高度。
- 通過 content:" "生成內(nèi)容作為最后一個元素，在一些瀏覽器（firefox直到7.0）仍然會產(chǎn)生額外的空隙。Unicode字符里有一個“零寬度空格”，也就是
\200B,這個字符本身是不可見的,因此我們可以使用這個字符。或，最后加個屬性（visibility:hidden）。
參考： - https://segmentfault.com/a/1190000004865198
- http://www.iyunlu.com/view/css-xhtml/55.html
定位方式
- 繼承父元素
inherit - 默認(rèn)定位
position: static：元素使用正常的布局行為，即其在文檔流中的當(dāng)前布局位置（也就是說忽略top bottom left right Z-index聲明） - 相對定位
position: relative：參考點為元素本身正常位置，相對于此位置而進行定位，但其實際位置仍為原文檔流位置，只是看起來位置變了。使用場景即不想影響之后其他元素的位置。 - 絕對定位
-
position: absolute：生成絕對定位的元素，相對于static定位以外的第一個祖先元素進行定位，位置通過top bottom left right進行規(guī)定。脫離文檔，不再占據(jù)文檔中的空間，其他元素會填充原本的空間。使用場景：當(dāng)想忽略其位置而進行定位時。 -
postion: fixed：固定定位，脫離文檔流，不再占據(jù)原空間。參考點為瀏覽器窗口。會隨著屏幕滾動條滾動而移動，故使用場景為隨屏幕而移動懸浮。
下圖為相對定位relative和絕對定位absolute的區(qū)別
定位區(qū)別.png
鏈接為以上幾個定位的實際效果：定位效果
Z-Index
不引入Z-Index時的情況：（1-5依次從最底部到頂部）
- 根元素的背景與邊框
- 位于普通流中的后代塊元素按照它們在 HTML 中出現(xiàn)的順序?qū)盈B
- 浮動塊元素
- 常規(guī)流中的后代行內(nèi)元素
- 后代中的定位元素按照它們在 HTML 中出現(xiàn)的順序?qū)盈B
不引入時.png
注：圖中"no position"在左邊a（紅色）塊之上，d（橘色）之下，完全符合3 4 5的順序。
引入Z-Index后
注：z-index只對指定了 [position]屬性為非static的元素有效。
引入Z-Index后.png
- 當(dāng)沒有指定 z-index 的時候， 所有元素都在會被渲染在默認(rèn)層(0層)。
- 當(dāng)多個元素的 z-index 屬性相同的時候(在同一個層里面)，那么將按照沒有引入z-index時的規(guī)則進行布局。
- 該圖元素 div#5 的 z-index 無效， 因為他沒有被指定 position 屬性。
如何形成層疊上下文
文檔中的層疊上下文由滿足以下任意一個條件的元素形成：
- 根元素 (HTML),
- z-index 值不為 "auto"的 絕對/相對定位，
- 一個 z-index 值不為 "auto"的 flex 項目 (flex item)，即：父元素 display: flex|inline-flex，
- [opacity]屬性值小于 1 的元素。
- [transform]屬性值不為 "none"的元素。
- [mix-blend-mode]屬性值不為 "normal"的元素。
- [filter]值不為“none”的元素。
- perspective]值不為“none”的元素。
- [isolation]屬性被設(shè)置為 "isolate"的元素。
- position: fixed。
- 在 [will-change]中指定了任意 CSS 屬性，即便你沒有直接指定這些屬性的值。
- [-webkit-overflow-scrolling]屬性被設(shè)置 "touch"的元素。
總結(jié)
層疊順序.png
- 判斷準(zhǔn)則：
- 誰大誰上：當(dāng)具有明顯的層疊水平標(biāo)示的時候，如識別的z-indx值，在同一個層疊上下文領(lǐng)域，層疊水平值大的那一個覆蓋小的那一個。
- 后來居上：當(dāng)元素的層疊水平一致、層疊順序相同的時候，在DOM流中處于后面的元素會覆蓋前面的元素。
- z-index:0所在的<div>元素是層疊上下文元素,而z-index:auto所在的<div>元素是一個普通的元素。兩個前者做比較，依照后來居上；兩個后者做比較，依照誰大誰上。
- z-index只對指定了position為非static屬性的元素有效。
- z-index的數(shù)值大的元素會覆蓋到小的上面。
參考：
- http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
- https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index
- https://github.com/norvca/blog/issues/11
Position:relative和負(fù)Margin的區(qū)別
- Position:relative相對于元素本身所在位置進行定位，產(chǎn)生偏移。但事實上元素所處位置并沒有改變，只是看起來偏移了。后面的元素仍在原來的位置不動。
- 負(fù)Margin改變了元素原來所處的位置。后面的元素會相應(yīng)作出移動。
JSBin地址
relative和負(fù)margin.png
BFC
BFC（Block Format Context）：塊級格式化上下文，是Web頁面的可視化CSS渲染的一部分。它是塊盒子的布局發(fā)生，浮動互相交互的區(qū)域。
- 如何生成
一個塊級格式化上下文由以下之一創(chuàng)建： - 根元素或其它包含它的元素
- 浮動 (元素的 float 不是 none)
- 絕對定位的元素 (元素具有 position 為 absolute 或 fixed)
- 內(nèi)聯(lián)塊 inline-blocks (元素具有 display: inline-block)
- 表格單元格 (元素具有 display: table-cell，HTML表格單元格默認(rèn)屬性)
- 表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)
- 塊元素具有overflow ，且值不是 visible
- display: flow-root
或者簡單來看，如表格：
| 屬性 | 值 |
|---|---|
| float | left ; right （即不為none） |
| overflow | hidden ; auto ; scroll （不可為visible） |
| display | table-cell ; table-caption ; inlin-block ; flow-foot |
| position | absolute ; fixed |
元素?fù)碛羞@些屬性后，便會建立塊級格式化上下文。
- 特性
- 阻止垂直外邊距合并。
注：使用overflow時需要在元素外面加個父元素包裹，并給父元素設(shè)置overflow:hidden，其他方法不需要如此，直接給元素設(shè)置即可（例中便為此情況）。
例：
JSbin地址-阻止垂直外邊距合并
阻止外邊距合并.png
- BFC不會重疊浮動元素。
例：
JSbin地址-不重疊浮動元素
不重疊浮動元素.png
- BFC可以包含浮動。
例：
JSbin地址-包含浮動
包含浮動.png
外邊距合并
- 發(fā)生外邊距塌陷的三種基本情況:
- 相鄰的兄弟元素
-
塊級父元素與其第一個/最后一個子元素
如果塊級父元素中，不存在上邊框、上padding、inline content、 清除浮動 這四條屬性（對于上邊框和上padding，也可以說，當(dāng)上邊距及上padding寬度為0時），那么這個塊級元素和其第一個子元素的上邊距就可以說”挨到了一起“。此時這個塊級父元素和其第一個子元素就會發(fā)生 上外邊距合并 現(xiàn)象，換句話說，此時這個父元素對外展現(xiàn)出來的外邊距將直接變成這個父元素和其第一個子元素的margin-top的較大者。 -
空塊元素
如果存在一個空的塊級元素，其 border、padding、inline content、height、min-height 都不存在。那么此時它的上下邊距中間將沒有任何阻隔，此時它的上下外邊距將會合并。 - 外邊距如何合并
- margin 都為正值，則取較大的 margin 值。
- margin 一正一負(fù)，則取相加后的數(shù)值。
- margin 都為負(fù)值，則取負(fù)值絕對值較大的 margin 值，此時 margin 為負(fù)值。
- 阻止相鄰元素外邊距合并
使其中一個元素形成塊級格式化上下文即可，詳見上一章BFC。 - 父子外邊距合并范例
JSBin-父子外邊距合并
父子外邊距合并.png
