1浮動元素有什么特征迂苛？對父容器、其他浮動元素鼓择、普通元素三幻、文字分別有什么影響?
特征：浮動元素會脫離文檔流，按照指定方向發(fā)生移動呐能，遇到父級邊界或者相鄰的浮動元素停了下來赌髓。
對父容器的影響： 不與父容器發(fā)生外邊距合并。無法撐開父元素催跪。
對其他浮動元素的影響：
如果父容器足夠?qū)捤洌c其他浮動元素同一水平方向依次排列。
父容器寬度比較窄時懊蒸，超出父容器寬度的浮動元素向下移動,直到有足夠的空間,如果水平排列三個以上高度不同浮動元素荣倾，那么向下移動的時候可能被卡住。
對普通元素的影響：浮動元素之前的普通元素不受影響骑丸。浮動元素之后的普通元素因感知不到浮動元素的存在會被浮動元素覆蓋舌仍。
對文字的影響：文字無法被浮動元素覆蓋，因而會圍繞浮動元素排列通危。
2清除浮動指什么? 如何清除浮動? 兩種以上方法
清除浮動指：消除浮動元素對其他元素因浮動元素造成的高度塌陷的問題铸豁。
清除浮動方法：
1浮動元素脫離文檔流，父元素?zé)o法感知浮動元素的容量菊碟，如果父元素未設(shè)置高度值节芥，父元素高度無法只由浮動元素撐開,造成父容器塌陷.
父級div定義 height ：
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
優(yōu)點：簡單头镊、代碼少蚣驼、容易掌握
缺點：只適合高度固定的布局，要給出精確的高度相艇，如果高度和父級div不一樣時颖杏，會產(chǎn)生問題
建議：不推薦使用，只建議高度固定的布局時使用
2結(jié)尾處加空div標(biāo)簽 clear:both ：
原理：添加一個空div坛芽，利用css提高的clear:both清除浮動留储，讓父級div能自動獲取到高度
優(yōu)點：簡單、代碼少咙轩、瀏覽器支持好欲鹏、不容易出現(xiàn)怪問題
缺點：不少初學(xué)者不理解原理；如果頁面浮動布局多臭墨，就要增加很多空div，讓人感覺很不好
建議：不推薦使用膘盖，但此方法是以前主要使用的一種清除浮動方法
3父級div定義 偽類:after 和 zoom ：
原理：IE8以上和非IE瀏覽器才支持:after胧弛，原理和方法2有點類似，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動問題
優(yōu)點：瀏覽器支持好侠畔、不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用结缚，如：騰迅，網(wǎng)易软棺，新浪等等）
缺點：代碼多红竭、不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持喘落。
建議：推薦使用茵宪，建議定義公共類，以減少CSS代碼瘦棋。
.clearfix:after {
content: " "; /* 舊版瀏覽器不支持空內(nèi)容 */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.clearfix {
*zoom:1;
}
3有幾種定位方式稀火，分別是如何實現(xiàn)定位的，參考點是什么赌朋，使用場景是什么凰狞？
inherit ：規(guī)定應(yīng)該從父元素繼承 position 屬性的值。
static：默認值,沒有定位沛慢，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）
relative：生成相對定位的元素赡若，相對于元素本身正常位置進行定位。
absolute生成絕對定位的元素团甲，相對于static定位以外的第一個祖先元素進行定位,元素的位置通過 left, top, right以及 bottom 屬性進行規(guī)定逾冬。
fixed生成絕對定位的元素，相對于瀏覽器窗口進行定位躺苦。元素的位置通過 left, top, right 以及 bottom 屬性進行規(guī)定粉渠。
postion：sticky分冈，盒位置根據(jù)正常流計算(這稱為正常流動中的位置)，然后相對于該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位霸株。在所有情況下（即便被定位元素為 table 時）雕沉，該元素定位均不對后續(xù)元素造成影響。當(dāng)元素 B 被粘性定位時去件，后續(xù)元素的位置仍按照 B 未定位時的位置來確定坡椒。position: sticky 對 table 元素的效果與 position: relative 相同。
ps兼容性較差尤溜，一般不使用倔叼。
absolute：相對于定位了的第一個父元素。（會脫離文檔流）
relative：相對于自身位置移動宫莱。（不會脫離文檔流）
fixed：相對于瀏覽器窗口定位丈攒。（會脫離文檔流）
4 z-index 有什么作用? 如何使用?
● z-index值表示誰壓著誰。數(shù)值大的壓蓋住數(shù)值小的授霸。
● 只有定位了的元素巡验，才能有z-index值。也就是說碘耳，不管相對定位显设、絕對定位、固定定位辛辨，都可以使用z-index值捕捂。而浮動的東西不能用。
● z-index值沒有單位斗搞，就是一個整數(shù)指攒。默認的z-index值是0,可以為負數(shù).
● 如果大家都沒有z-index值，或者z-index值一樣僻焚，那么誰寫在HTML后面幽七，誰在上面能壓住別人。定位了的元素溅呢，永遠能夠壓住沒有定位的元素澡屡。
● 從父現(xiàn)象：父親慫了，兒子再牛逼也沒用咐旧。
5. position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
1.relative方式偏移不會影響周圍元素的位置驶鹉，周圍元素認為設(shè)置了relative方式元素的位置沒有變化。
2.負margin偏移會使周圍元素也會跟隨者該元素偏移铣墨。
6.BFC 是什么室埋？如何生成 BFC？BFC 有什么作用？舉例說明
BFC是什么
BFC的全稱是 Block Format Content直譯為"塊級格式化上下文"姚淆。它是一個獨立的渲染區(qū)域孕蝉，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局腌逢，并且與這個區(qū)域外部毫不相干降淮。
哪些元素會生成BFC?
1、根元素
2搏讶、float屬性不為none
3佳鳖、position為absolute或fixed
4、display為inline-block, table-cell, table-caption, flex, inline-flex
5媒惕、overflow不為visible
BF作用
1清除內(nèi)部浮動系吩，解決父容器塌陷問題
2防止垂直 margin 重疊
7.在什么場景下會出現(xiàn)外邊距合并？如何合并妒蔚？如何不讓相鄰元素外邊距合并穿挨？給個父子外邊距合并的范例
1.相鄰元素：兩個或多個毗鄰的普通流中的塊元素垂直方向上的 margin 會折疊，取其中margin的最大值
2.包含（父子）元素疊加：包含元素的外邊距隔著父元素的padding和border肴盏， 當(dāng)這兩項都不存在的時候科盛， 父元素與其包含垂直外邊距相鄰的子元素（也就是第一個子元素和最后一個子元素）， 產(chǎn)生疊加叁鉴。 添加padding border中的任何一項即會取消疊加。
最終的margin值計算方法如下：
全部都為正值佛寿，取最大者幌墓；
不全是正值，這兩個值相加得到的值
兩個負值則取絕對值的最大值
3如果存在一個空的塊級元素冀泻，其 border常侣、padding、inline content弹渔、height胳施、min-height 都不存在。那么此時它的上下邊距中間將沒有任何阻隔肢专，此時它的上下外邊距將會合并舞肆。
如何防止外邊距合并？
1.生成BFC博杖。
2.內(nèi)層元素的margin用外層元素的padding來代替椿胯。
