浮動定位 BFC 邊距合并
浮動元素
div的順序是HTML代碼中div的順序決定的。
浮動可以理解為讓某個div元素脫離標準流，漂浮在標準流之上，和標準流不是一個層次。使元素脫離文檔流，按照指定方向發生移動，遇到父級邊界或者相鄰的浮動元素停了下來。
假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那么A元素會跟隨在上一個元素的后邊
(如果一行放不下這兩個元素，那么A元素會被擠到下一行)；如果A元素上一個元素是標準流中的元素，那么A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。
對父元素的影響
對于父元素來說，元素浮動之后脫離當前的文檔流，所以無法撐開父元素，造成父元素的塌陷。
對其兄弟元素（非浮動）的影響：
如果兄弟元素為塊級元素，元素會占據它的位置，元素會處在浮動元素的下層（無法通過z-index屬性改變他們的層疊位置），但它的內部文字和其他行內元素都會環繞浮動元素。
對文字的影響
如果兄弟元素為內聯元素，則元素會環繞浮動元素排列。
對其兄弟元素（浮動）的影響
同一個方向的浮動元素：
當一個浮動元素在浮動過程中碰到同一個方向的浮動元素時，它會緊跟在它們后面。
反方向的浮動元素：
互不影響，位于同一條水平線上，當空間不夠時會被擠下。
float對自身元素的影響
float對象將被視作塊對象(block-level)，即display屬性等于block。
對子元素的影響
浮動元素, 其高度或寬度取浮動子元素和非浮動子元素高度或寬度的最大值。
對父元素非浮動兄弟元素的影響
父元素之外的非浮動元素將會無視該浮動元素, 他們只會相對父元素按照正常文檔流去排列。
對父元素浮動兄弟元素的影響
父元素之外的浮動兄弟元素, 會挨著該浮動元素。
清除浮動
清除浮動：
清除對應的單詞是 clear，對應CSS中的屬性是 clear：left | right | both | none。
元素浮動之前，也就是在標準流中，是豎向排列的，而浮動之后可以理解為橫向排列。
浮動會影響后面的元素，清除浮動可以理解為打破橫向排列。
如何清除浮動：
1.在浮動元素后添加一個空元素，div class="clear"，然后在css中添加.clear{clear:both}即可。
2.利用浮動元素的容器的::after偽元素來清楚浮動，由于::after偽元素只對塊級元素有用，因此要設置display:block，通過::after偽元素在浮動結束之后，向其中添加看不見的空格“\20”或者是點'.'，可以使用 content:""。IE6，IE7不支持after偽元素，因此要添加.clearfix{zoom:1}。
3.直接給浮動元素的下一個元素添加一個clear：both；這個元素和浮動元素是在一層container中，如果在浮動元素的下一層的話，用::after偽元素。
4.給浮動元素的容器添加overflow:hidden；(overflow:auto)。 在使用float之后，元素會飄上去，但是使用overflow:hidden；之后，浮動元素又回到了容器中，把容器高度撐起，達到了清理浮動的作用。
定位方式
position的屬性值共有四個static、relative、absolute、fixed。
static
指定元素使用正常的布局行為，即元素在文檔流中當前的布局位置。此時 top, right, bottom, left 和 z-index 屬性無效。
relative
元素先放置在未添加定位時的位置，再在不改變頁面布局的前提下調整元素位置（因此會在此元素未添加定位時所在位置留下空白）。position:relative 未定義對 table-*-group, table-row, table-column, table-cell, table-caption 元素應用的效果。
相對定位就是將元素偏離元素的默認位置，但普通流中依然保持著原有的默認位置，并沒有脫離普通流，只是視覺上發生的偏移。
absolute
不為元素預留空間，通過指定元素相對于最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設置外邊距（margin），且不會與其他邊距合并。
應用了position: absolute的元素會循著節點樹中的父（祖）元素來確定“根”，然后相對這個“根”元素來偏移。如果在其節點樹中所有父（祖）元素都沒有設置position屬性值為relative或者absolute則該元素最終將對body進行位置偏移。應用了position: absolute的元素會脫離頁面中的普通流并改變display屬性。
fixed
不為元素預留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出現在的每頁的固定位置。fixed 屬性會創建新的棧上下文。當元素祖先的 transform 屬性非 none 時，容器由視口改為該祖先。
一個固定定位（position屬性的值為fixed）元素會相對于視窗來定位，這意味著即便頁面滾動，它還是會停留在相同的位置。和 relative 一樣， top 、 right 、 bottom 和 left 屬性都可用。
z-index
z-index 屬性指定了一個元素及其子元素的 z-order。 當元素之間重疊的時候，z-order 決定哪一個元素覆蓋在其余元素的上方顯示。 通常來說 z-index 較大的元素會覆蓋較小的一個。
對于一個已經定位的元素（即position屬性值是非static的元素），z-index 屬性指定：
元素在當前堆疊上下文中的堆疊層級。
元素是否創建一個新的本地堆疊上下文。
背景和邊框 —— 形成層疊上下文的元素的背景和邊框。 層疊上下文中的最低等級。
負z-index值 —— 層疊上下文內有著負z-index值的子元素。
塊級盒 —— 文檔流中非行內非定位子元素。
浮動盒 —— 非定位浮動元素。
行內盒 —— 文檔流中行內級別非定位子元素。
z-index: 0 —— 定位元素。 這些元素形成了新的層疊上下文。
正z-index值 —— 定位元素。 層疊上下文中的最高等級。
z-index不為auto，opacity小于1的元素會構建堆疊上下文。
堆疊上下文可以嵌入其他堆疊上下文。
每個堆疊上下文和它的同級上下文是獨立的。
每個堆疊上下文是自包含的。
margin 負值與 position:relative
當margin-bottom、margin-right設為負值的時候，元素本身沒有位置變化，后面的元素會下移、右移。
position:relative的元素設置top、left后元素還占據原來位置，相對的是它原本在文檔流中的位置而進行的偏移。
設置了這個屬性后，元素會根據top，left，bottom，right進行偏移，關鍵點是它原本的空間仍然保留。
占據的文檔空間不會隨 top / right / left / bottom 等屬性的偏移而發生變動。
BFC
BFC，塊級格式化上下文，是一個獨立的渲染區域，只有block-level-box級別參與，規定了內部如何布局并且和外部毫不相干。
如何觸發 BFC
根元素；float屬性不為none；position為absolute或fixed；
display為inline-block, table-cell, table-caption, flex, inline-flex
overflow不為visible。
BFC 作用
阻止外邊距折疊
當兩個塊級元素相鄰并且在同一個塊級格式化上下文時，它們垂直方向之間的外邊距會疊加。也就是說，即便兩個塊級元素相鄰，但當它們不在同一個塊級格式化上下文時它們的邊距也不會折疊。產生新的 BFC 就可以阻止外邊距折疊 。
BFC 可以包含浮動的元素
用 overflow: hidden 或 overflow: auto 觸發浮動元素的父元素的 BFC 特性，從而可以包含浮動元素，閉合浮動。
BFC 會根據子元素的情況自動適應高度，即使其子元素中包括浮動元素。
BFC 可以阻止元素被浮動元素覆蓋
使用 overflow: hidden 觸發了 BFC ，它并不會被它的兄弟浮動元素覆蓋，而是處于它的旁邊。假設浮動元素寬度和它的非浮動兄弟元素寬度都沒有超過父元素寬度，但兩個元素的寬度加起來超出了父元素寬度的時候，非浮動元素會下降到下一行，即處于浮動元素下方。
外邊距合并
塊的頂部外邊距和底部外邊距有時被組合(折疊)為單個外邊距，其大小是組合到其中的最大外邊距，這種行為稱為外邊距塌陷(margin collapsing)。
外邊距合并是CSS中一個特殊的概念。當兩個外邊距相鄰時，它們會合并為較大的那一個。 無論是相鄰元素的上下邊距，還是父子元素的上邊距，甚至是同一元素的上下邊距。
發生外邊距塌陷的三種基本情況：
相鄰的兄弟姐妹元素
不是 ”上面段落的下邊距“ 與 ”下面段落的上邊距“ 的求和 ，而是兩者中的較大者。
塊級父元素與其第一個/最后一個子元素
如果塊級父元素中，不存在上邊框、上內補、inline content、 清除浮動 這四條屬性（對于上邊框和上內補，也可以說，當上邊距及上內補寬度為0時），那么這個塊級元素和其第一個子元素的上邊距就可以說”挨到了一起“。此時這個塊級父元素和其第一個子元素就會發生 上外邊距合并 現象，換句話說，此時這個父元素對外展現出來的外邊距將直接變成這個父元素和其第一個子元素的margin-top的較大者。
空塊元素
如果存在一個空的塊級元素，其 border、padding、inline content、height、min-height 都不存在。那么此時它的上下邊距中間將沒有任何阻隔，此時它的上下外邊距將會合并。
拒絕外邊距合并
給父級元素添加 border-top 或 padding-top。
父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding就會不斷一層一層的找自己的祖先元素。只要給祖先元素設置個有效的 border 或者 padding 就好了。
