浮動元素特征 對父容器捌蚊、其他浮動元素审姓、普通元素囤踩、文字的影響

浮動會使應(yīng)用此屬性的元素脫離文檔流旨椒。按指定的位置來移動位置。當(dāng)遇到其父元素或者相鄰的元素時(shí)即停下堵漱。此樣式可用于 塊級元素 或 行內(nèi)元素综慎。
使用float浮動樣式的行內(nèi)元素，會跟使用inline-block樣式一樣可以設(shè)置寬高.內(nèi)外邊距
對父容器影響：父容器無法感知浮動元素存在勤庐，可能會造成高度坍塌示惊，需要清除浮動。
對其他浮動元素： 浮動元素可以感知到浮動元素愉镰，高度不一樣可能會出現(xiàn)卡住現(xiàn)象米罚。
對普通元素：普通元素?zé)o法感知浮動元素存在，會被浮動元素遮蓋丈探。
文字和行內(nèi)元素： 文字和行內(nèi)元素可以感知到浮動元素录择，會形成環(huán)繞效果。
注： 若普通塊級元素先渲染碗降，浮動元素后渲染隘竭，浮動元素會感知到普通塊級元素的存在，無法覆蓋其上遗锣，一般先渲染浮動元素货裹，后渲染普通塊級元素嗤形。

清除浮動

清除浮動是解決父容器坍塌現(xiàn)象精偿。通常使用clear屬性或形成BFC。
clear屬性不允許被清除浮動的元素的左邊/右邊挨著浮動元素，底層原理是在被清除浮動的元素上邊或者下邊添加足夠的清除空間
在父元素的子元素最后添加一個(gè)空div笔咽，并對其設(shè)置樣式：clear:both;

.father:after {
      content: "";
      display: block;
      clear: both;
}

由于在子元素最后添加了空div搔预，并清除了浮動，因此父容器被撐開叶组，實(shí)現(xiàn)了在視覺上包圍浮動元素的效果拯田。
利用BFC來清除浮動：
因?yàn)锽FC可以包含浮動，因此可以讓父元素生成一個(gè)新的BFC從而包圍浮動的子元素甩十。
可以對父元素設(shè)定以下樣式之一生成新BFC
float 為 left | right
overflow 為 hidden | auto | scorll
display 為 table-cell | table-caption | inline-block | flex | inline-flex
position 為 absolute | fixed

定位方式

static
該關(guān)鍵字指定元素使用正常的布局行為船庇，即元素在文檔流中當(dāng)前的布局位置。此時(shí) top, right, bottom, left 和 z-index 屬性無效侣监。

relative
該關(guān)鍵字下鸭轮，元素先放置在未添加定位時(shí)的位置，再在不改變頁面布局的前提下調(diào)整元素位置（因此會在此元素未添加定位時(shí)所在位置留下空白）橄霉。使用場景：為絕對定位設(shè)定參照物或?qū)υ刈陨砦恢眠M(jìn)行局部調(diào)整窃爷。

absolute
不為元素預(yù)留空間，通過指定元素相對于最近的非 static 定位祖先元素的偏移姓蜂，來確定元素位置按厘。絕對定位的元素可以設(shè)置外邊距（margins），且不會與其他邊距合并钱慢。如果元素沒有已定位的祖先元素逮京，那么他的位置就相對于初始包含塊html來定位。使用場景：當(dāng)想讓元素參照特定參照物進(jìn)行定位時(shí)使用滩字。

fixed
不為元素預(yù)留空間造虏，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時(shí)不會改變麦箍。打印時(shí)漓藕，元素會出現(xiàn)在的每頁的固定位置。fixed 屬性會創(chuàng)建新的層疊上下文挟裂。當(dāng)元素祖先的 transform 屬性非 none 時(shí)享钞，容器由視口改為該祖先。

sticky
盒位置根據(jù)正常流計(jì)算(這稱為正常流動中的位置)诀蓉，然后相對于該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位栗竖。在所有情況下（即便被定位元素為 table 時(shí)），該元素定位均不對后續(xù)元素造成影響渠啤。當(dāng)元素 B 被粘性定位時(shí)狐肢，后續(xù)元素的位置仍按照 B 未定位時(shí)的位置來確定。position: sticky 對 table 元素的效果與 position: relative 相同沥曹。

z-index

z-index 屬性指定了一個(gè)元素及其子元素的 z-order份名。 當(dāng)元素之間重疊的時(shí)候碟联，z-order 決定哪一個(gè)元素覆蓋在其余元素的上方顯示。 通常來說 z-index 較大的元素會覆蓋較小的一個(gè)僵腺。

對于一個(gè)已經(jīng)定位的元素（即position屬性值是非static的元素）鲤孵，z-index 屬性指定：
元素在當(dāng)前堆疊上下文中的堆疊層級。
元素是否創(chuàng)建一個(gè)新的本地堆疊上下文辰如。
取值：初始值為auto
auto
元素不會建立一個(gè)新的本地堆疊上下文普监。當(dāng)前堆疊上下文中新生成的元素和父元素堆疊層級相同。
<integer>
整型數(shù)字是生成的元素在當(dāng)前堆疊上下文中的堆疊層級琉兜。元素同時(shí)會創(chuàng)建一個(gè)堆疊層級為0的本地堆疊上下文凯正。這意味著子元素的 z-indexes 不與元素外的其余元素的 z-indexes 進(jìn)行對比。

z-index: auto;
z-index: 0;
z-index: 100;
z-index: -1; /*使用負(fù)值降低優(yōu)先級*/

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

position: relative 相對定位是相對于自身原來的位置進(jìn)行偏移 并不會影響其它文檔流中的元素 原來占據(jù)的空間不會變
負(fù)margin 元素偏移之后會影響其它的元素 原來占據(jù)的空間也會發(fā)生改變

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

一個(gè)塊格式化上下文（block formatting context） 是Web頁面的可視化CSS渲染的一部分夺饲。它是塊盒子的布局發(fā)生奸汇，浮動互相交互的區(qū)域。
BFC的通俗理解：
首先BFC是一個(gè)名詞往声，是一個(gè)獨(dú)立的布局環(huán)境擂找，我們可以理解為一個(gè)箱子（實(shí)際上是看不見摸不著的），箱子里面物品的擺放是不受外界的影響的浩销。轉(zhuǎn)換為BFC的理解則是：BFC中的元素的布局是不受外界的影響贯涎，并且 在一個(gè)BFC中，塊盒與行盒（行盒由一行中所有的內(nèi)聯(lián)元素所組成）都會垂直的沿著其父元素的邊框排列

一個(gè)塊格式化上下文由以下之一創(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

BFC容器是一個(gè)隔離的容器，和其他元素互不干擾普筹；所以我們可以用觸發(fā)兩個(gè)元素的BFC來解決垂直邊距折疊問題败明。

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

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

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

場景：
同一個(gè)BFC內(nèi)仁连，且同處于普通流中的垂直相鄰元素外邊距合并。
父子元素的外邊距合并阱穗。如果塊級父元素中饭冬，不存在border-top、padding-top揪阶、inline content昌抠、 清除浮動 這四條屬性,會發(fā)生上外邊距合并；若塊級父元素的 margin-bottom 與它的最后一個(gè)子元素的margin-bottom 之間沒有父元素的 border鲁僚、padding炊苫、inline content、height冰沙、min-height侨艾、 max-height 分隔時(shí)，就會發(fā)生 下外邊距合并 現(xiàn)象拓挥。
空元素的外邊距合并唠梨。如果存在一個(gè)空的塊級元素，其 border侥啤、padding当叭、inline content、height盖灸、min-height 都不存在蚁鳖。那么此時(shí)它的上下邊距中間將沒有任何阻隔，此時(shí)它的上下外邊距將會合并赁炎。

合并規(guī)則：
兩個(gè)margin都是正值的時(shí)候才睹，取兩者的最大值；
當(dāng) margin 都是負(fù)值的時(shí)候甘邀，取的是其中絕對值較大的琅攘，然后，從0位置松邪，負(fù)向位移坞琴；
當(dāng)有正有負(fù)的時(shí)候，相加的和逗抑。
所有毗鄰的margin要一起參與運(yùn)算剧辐，不能分步進(jìn)行寒亥。

不讓相鄰元素外邊距合并的方法：
被非空內(nèi)容、padding荧关、border 或 clear 分隔開溉奕。
不在一個(gè)普通流中或一個(gè)BFC中。
margin在垂直方向上不毗鄰忍啤。

c2 和 c3 的上邊距合并為30px