浮動(dòng)元素有什么特征医舆？對(duì)父容器、其他浮動(dòng)元素酌泰、普通元素、文字分別有什么影響?
浮動(dòng)的元素會(huì)脫離文檔流匕累，向左或者向右移動(dòng)至包含塊內(nèi)邊緣或者同樣浮動(dòng)的元素外邊緣陵刹。文檔流中的普通元素察覺(jué)不到浮動(dòng)元素，但是其文本內(nèi)容卻能察覺(jué)到浮動(dòng)元素欢嘿，呈現(xiàn)出圍繞浮動(dòng)元素排列的表現(xiàn)方式衰琐。
-
對(duì)父容器的影響：如果父容器中的元素都是浮動(dòng)元素巡验，那么父容器會(huì)失去它的高度
title -
對(duì)其他浮動(dòng)元素的影響：如果父元素的寬度不夠，父容器里的其他浮動(dòng)元素會(huì)向下移動(dòng)碘耳，直到位置足夠放下。
title
如果浮動(dòng)元素的高度不同框弛，向下移動(dòng)的元素就會(huì)被比它高的元素卡住
title
-
對(duì)普通元素的影響：文檔流中的普通元素察覺(jué)不到浮動(dòng)元素辛辨，但是其文本內(nèi)容卻能察覺(jué)到浮動(dòng)元素，呈現(xiàn)出圍繞浮動(dòng)元素排列的表現(xiàn)方式瑟枫。
紅框左移,綠框沒(méi)有察覺(jué)到浮動(dòng)元素紅框的存著斗搞，位置沒(méi)有發(fā)生改變，綠框被覆蓋
title
文本內(nèi)容卻能察覺(jué)到浮動(dòng)元素慷妙，呈現(xiàn)出圍繞浮動(dòng)元素排列的表現(xiàn)方式
title 什么是文檔流僻焚？
文檔流是指按照從左到右、從上到下的布局方式膝擂，又稱普通流虑啤、正常流、標(biāo)準(zhǔn)文檔流架馋。
標(biāo)準(zhǔn)化的語(yǔ)言是：文檔流是瀏覽器按照 HTML 的內(nèi)容按順序解析并呈現(xiàn)狞山，遇到行內(nèi)元素就往行內(nèi)放，遇到塊級(jí)元素就空一行放置叉寂，一次排列萍启。
清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
根據(jù)上圖可以看到，正常情況下屏鳍，父容器不管有沒(méi)有設(shè)置高度勘纯，其高度都會(huì)被里面的子元素?fù)纹饋?lái)，但是現(xiàn)在父容器中都是浮動(dòng)元素钓瞭，他的高度就塌陷了驳遵，那么我里面可能原本設(shè)置了 背景， 圖片降淮，內(nèi)外邊距 就都不能正常顯示了超埋。因此我們就可以用清除浮動(dòng)的方式來(lái)將父容器正常顯示出來(lái)。
- 如何清除浮動(dòng)呢
- 在文檔中添加一個(gè)元素佳鳖，給他設(shè)置一個(gè)樣式霍殴，
clear:both;
title
這種方法會(huì)在文檔的最后產(chǎn)生一個(gè)無(wú)意義標(biāo)簽，那么我們還可以用另一種方法寫系吩，css中在父容器的最后添加一個(gè):after
title
2.將父容器變成BFC
什么是BFC
BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"来庭。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與穿挨， 它規(guī)定了內(nèi)部的Block-level Box如何布局月弛，并且與這個(gè)區(qū)域外部毫不相干肴盏。
BFC布局規(guī)則
- 內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置
- Box垂直方向的距離由margin決定帽衙。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊 每個(gè)元素的margin box的左邊菜皂， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)厉萝。即使存在浮動(dòng)也是如此恍飘。
- BFC的區(qū)域不會(huì)與float box重疊。
- BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器谴垫，容器里面的子元素不會(huì)影響到外面的元素章母。反之也如此。
- 計(jì)算BFC的高度時(shí)翩剪，浮動(dòng)元素也參與計(jì)算乳怎。
哪些元素會(huì)生成BFC?
- 根元素
- float: left|right
- overflow: hidden|auto|scroll
- display: table-cell|table-caption|inline-block
- position: absolute|fixed
參考文章
綜上所述，只要將父容器變成一個(gè)BFC前弯，就可以達(dá)到清除浮動(dòng)的效果了
| 屬性 | 描述 |
|---|---|
| inherit | 規(guī)定應(yīng)該從父元素繼承 position 屬性的值 |
| static | 默認(rèn)值,沒(méi)有定位蚪缀，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明） |
| relative | 生成相對(duì)定位的元素，相對(duì)于元素本身正常位置進(jìn)行定位,因此恕出，left:20px 會(huì)向元素的 left 位置添加20px |
| absolute | 生成絕對(duì)定位的元素椿胯，相對(duì)于static定位以外的第一個(gè)祖先元素（offset parent）進(jìn)行定位,元素的位置通過(guò) left, top, right 以及 bottom 屬性進(jìn)行規(guī)定 |
| fixed | 生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位剃根。元素的位置通過(guò) left, top, right 以及 bottom 屬性進(jìn)行規(guī)定 |
| sticky | CSS3新屬性哩盲，表現(xiàn)類似position:relative和position:fixed的合體。由于兼容性不是很好狈醉，不推薦使用 |
有幾種定位方式廉油，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么苗傅，使用場(chǎng)景是什么抒线？
CSS 定位 ：Positioning屬性把元素放置到一個(gè)靜態(tài)的、相對(duì)的渣慕、絕對(duì)的嘶炭、或固定的位置中。屬性有以下幾種：
| 屬性 | 描述 |
|---|---|
| inherit | 規(guī)定應(yīng)該從父元素繼承 position 屬性的值 |
| static | 默認(rèn)值,沒(méi)有定位逊桦，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明） |
| relative | 生成相對(duì)定位的元素眨猎，相對(duì)于元素本身正常位置進(jìn)行定位,因此，left:20px 會(huì)向元素的 left 位置添加20px |
| absolute | 生成絕對(duì)定位的元素强经，相對(duì)于static定位以外的第一個(gè)祖先元素（offset parent）進(jìn)行定位,元素的位置通過(guò) left, top, right 以及 bottom 屬性進(jìn)行規(guī)定 |
| fixed | 生成絕對(duì)定位的元素睡陪，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過(guò) left, top, right 以及 bottom 屬性進(jìn)行規(guī)定 |
| sticky | CSS3新屬性，表現(xiàn)類似position:relative和position:fixed的合體兰迫。由于兼容性不是很好信殊，不推薦使用 |
css的定位方式基本有三種：普通流，相對(duì)定位汁果，絕對(duì)定位
- 普通流涡拘，相對(duì)定位（不會(huì)脫離文檔流）
- 普通流是默認(rèn)定位方式，在普通流中元素框的位置由元素在html中的位置決定据德，元素position屬性為static或繼承來(lái)的static時(shí)就會(huì)按照普通流定位鲸伴，這也是我們最常見(jiàn)的方式
-
相對(duì)定位比較簡(jiǎn)單，對(duì)應(yīng)position屬性的relative值晋控，如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在他所在的位置上姓赤，然后可以通過(guò)設(shè)置垂直或水平位置赡译，讓這個(gè)元素相對(duì)于它自己移動(dòng)，在使用相對(duì)定位時(shí)不铆，無(wú)論元素是否移動(dòng)蝌焚，元素在文檔流中占據(jù)原來(lái)空間，只是表現(xiàn)出來(lái)的位置會(huì)改變
普通文檔流的排列方式：
title
相對(duì)定位：position:relative;
2.絕對(duì)定位誓斥，固定定位（會(huì)脫離文檔流）
絕對(duì)定位
絕對(duì)定位的元素的位置是相對(duì)于距離最近的非static祖先元素位置決定的只洒。如果元素沒(méi)有已定位的祖先元素，那么他的位置就相對(duì)于初始包含塊html來(lái)定位劳坑。
因?yàn)榻^對(duì)定位與文檔流無(wú)關(guān)毕谴，所以絕對(duì)定位的元素可以覆蓋頁(yè)面上的其他元素，可以通過(guò)z-index屬性控制疊放順序距芬，z-index越高涝开，元素位置越靠上。也可以理解為層級(jí)框仔。
fixed固定定位是屬于絕對(duì)定位中的一種舀武。一般使用場(chǎng)景，例如：導(dǎo)航欄离斩，右側(cè)工具欄银舱，底部回到頂部按鈕等。它的定位是相對(duì)于瀏覽器的視窗口（viewport）來(lái)定的跛梗，而其他的絕對(duì)定位則是相遇于文檔（html）定位的寻馏。
z-index 有什么作用? 如何使用?
z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面核偿。
- 元素可擁有負(fù)的 z-index 屬性值操软。
- Z-index 僅能在定位元素上奏效（例如 position:absolute;
position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative是在自身的文檔流中讓自己顯示上發(fā)生偏移，文檔流中其他元素不會(huì)因?yàn)樗钠贫a(chǎn)生位置上的變化宪祥；負(fù)margin是讓元素的外邊框產(chǎn)生空隙從而發(fā)生偏移聂薪，此偏移會(huì)影響到元素后面的元素的位置家乘。
BFC 是什么？如何生成 BFC藏澳？BFC 有什么作用仁锯？舉例說(shuō)明
BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域翔悠，只有Block-level box參與业崖， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干蓄愁。
以下元素都可以生成BFC
- 根元素
- float: left|right
- overflow: hidden|auto|scroll
- display: table-cell|table-caption|inline-block
- position: absolute|fixed
BFC的作用：
-
清除內(nèi)部浮動(dòng)
title
隨意使用一個(gè)元素生成BFC双炕，就能夠清除浮動(dòng)了
-
防止垂直 margin 重疊
title
可以讓兩個(gè)元素分別在不同的BFC下，那么兩個(gè)元素的邊距就不會(huì)被重疊了
在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并撮抓？如何合并妇斤？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例
當(dāng)兩個(gè)垂直外邊距（margin）相遇時(shí)丹拯，將形成一個(gè)外邊距合并站超，合并后的高度以這兩個(gè)外邊距中高度值較大值為準(zhǔn)。
外邊距合并：
- 相鄰的同胞元素
title
阻止外邊距合并
- 給元素加一個(gè)
display:inline-block;(只針對(duì)當(dāng)前加的元素起效) - 給元素添加folat, position等
- 父元素與子元素（在父元素沒(méi)有邊框乖酬，padding等的情況下死相，最上面的元素的上邊距和最下面的元素下邊距與父元素發(fā)生合并）
阻止外邊距合并
- 父元素生成一個(gè)新的BFC, overflow, display等...
- 給父元素加上一個(gè)邊框或者padding等..
