浮動(dòng)元素有什么特征覆致？對(duì)父容器、其他浮動(dòng)元素肺蔚、普通元素煌妈、文字分別有什么影響?
浮動(dòng)元素脫離文檔流，當(dāng)一個(gè)元素設(shè)置成浮動(dòng)之后宣羊，不管是塊級(jí)元素還是行內(nèi)元素都可以設(shè)置寬高璧诵，如果沒(méi)有設(shè)置width，那么將自動(dòng)收縮為文字的寬度仇冯。
對(duì)父容器：元素浮動(dòng)之后如果父容器不設(shè)置高度之宿，那么父容器的高度會(huì)塌陷。
對(duì)其他浮動(dòng)元素：會(huì)跟這個(gè)浮動(dòng)元素一起浮動(dòng)苛坚，如果空間夠的話比被，會(huì)貼著這個(gè)浮動(dòng)元素，如果空間不夠就往下移泼舱，直到碰到另一個(gè)元素或者文檔的邊等缀。
對(duì)普通元素：浮動(dòng)元素脫離文檔流，普通的元素會(huì)移動(dòng)到之前浮動(dòng)元素所占的位置娇昙，浮動(dòng)元素會(huì)把普通元素蓋住尺迂。
對(duì)文字：元素浮動(dòng)之后文字會(huì)圍繞在浮動(dòng)元素的周圍，形成字圍效果冒掌。
清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
1.給浮動(dòng)的元素的祖先元素加高度噪裕。加了高度的祖先元素，就可以關(guān)住浮動(dòng)元素了股毫，只要浮動(dòng)在一個(gè)有高度的盒子中膳音，那么這個(gè)浮動(dòng)就不會(huì)影響后面的浮動(dòng)元素。所以就是清除浮動(dòng)帶來(lái)的影響了铃诬。
2.clear:both;（但這種方法有一個(gè)非常大的祭陷、致命的問(wèn)題，margin失效了氧急。）
3.在浮動(dòng)元素的父元素底部加個(gè)空標(biāo)簽，標(biāo)簽設(shè)置成clear:both.
4.BFC清理浮動(dòng)毫深，BFC不會(huì)重疊浮動(dòng)元素吩坝，并且可以包含浮動(dòng)。
我們可以利用BFC可以包含浮動(dòng)的特性來(lái)清除浮動(dòng)哑蔫，只要父容器形成BFC就可以包含浮動(dòng)钉寝，形成BFC的方法：
float為left或者right弧呐；
display為table-cell|table-caption|inline-block|flex
overflow為hidden|scroll|auto
position為absolute|fixed
5.使用偽類元素css：after
.clearfix{
*zoom:1;
}
.clearfix:after{
content:" ";
display:block;
clear:both;
}
有幾種定位方式，分別是如何實(shí)現(xiàn)定位的嵌纲，參考點(diǎn)是什么俘枫，使用場(chǎng)景是什么？
1逮走，static(默認(rèn))
當(dāng)你沒(méi)有為一個(gè)元素指定定位方式時(shí)鸠蚪，默認(rèn)為static，也就是按照文檔的流式定位师溅，將元素放到一個(gè)合適的地方茅信。忽略top,left,right,bottom,和z-index的聲明。
2.position:relative;相對(duì)定位
相對(duì)定位墓臭，就是微調(diào)元素位置的蘸鲸。讓元素相對(duì)自己原來(lái)的位置，進(jìn)行位置調(diào)整窿锉。相對(duì)定位的元素不脫離文檔流酌摇，之前占用的位置依然空著，相對(duì)定位有坑嗡载，所以一般不用于做“壓蓋”效果窑多。頁(yè)面中，效果極小鼻疮。就兩個(gè)作用：
- 微調(diào)元素
- 做絕對(duì)定位的參考
3.position: absolute絕對(duì)定位怯伊。
絕對(duì)定位的盒子，是脫離標(biāo)準(zhǔn)文檔流的判沟，絕對(duì)定位之后耿芹，標(biāo)簽就不區(qū)分所謂的行內(nèi)元素、塊級(jí)元素了挪哄，不需要display:block;就可以設(shè)置寬吧秕、高了
絕對(duì)定位的元素以最近的已經(jīng)定位的祖先元素的為參考點(diǎn)，如果不設(shè)top,和left,相對(duì)祖先元素的padding 定位迹炼。設(shè)了top,left等值絕對(duì)定位會(huì)沿著父容器的內(nèi)邊框做定位砸彬。
不一定是相對(duì)定位，任何定位斯入，都可以作為參考點(diǎn)
<div> → 絕對(duì)定位
<p></p> → 絕對(duì)定位砂碉，將以div作為參考點(diǎn)。因?yàn)楦赣H定位了刻两。
</div>
子絕父絕增蹭、子絕父相、子絕父固磅摹，都是可以給兒子定位的滋迈。但是霎奢，工程上子絕、父絕饼灿，沒(méi)有一個(gè)盒子在標(biāo)準(zhǔn)流里面了幕侠，所以頁(yè)面就不穩(wěn)固，沒(méi)有任何實(shí)戰(zhàn)用途碍彭。工程上晤硕，“子絕父相”有意義，父親沒(méi)有脫標(biāo)硕旗，兒子脫標(biāo)在父親的范圍里面移動(dòng)窗骑，如果父親和祖先都沒(méi)有定位，
<div class=”box1”> → 絕對(duì)定位
<div class=”box2”> → 相對(duì)定位
<div class=”box3”> → 沒(méi)有定位
<p></p> → 絕對(duì)定位漆枚，以box2為參考定位创译。
</div>
</div>
</div>
如果沒(méi)有父級(jí)元素可以參照定位時(shí)，
絕對(duì)定位的參考點(diǎn)墙基，如果用top描述软族，那么定位參考點(diǎn)就是頁(yè)面的左上角，而不是瀏覽器的左上角：
如果用bottom描述残制，那么就是瀏覽器首屏窗口尺寸立砸，對(duì)應(yīng)的頁(yè)面的左下角：
4.position：fixed固定定位
固定定位，就是相對(duì)瀏覽器窗口定位初茶。頁(yè)面如何滾動(dòng)颗祝，這個(gè)盒子顯示的位置不變。固定定位脫離文檔流恼布！
當(dāng)固定導(dǎo)航欄的時(shí)候就可以使用固定定位螺戳。
z-index 有什么作用? 如何使用?
z-index值表示誰(shuí)壓著誰(shuí)。數(shù)值大的壓蓋住數(shù)值小的折汞。
● 只有定位了的元素倔幼，才能有z-index值。也就是說(shuō)爽待，不管相對(duì)定位损同、絕對(duì)定位、固定定位鸟款，都可以使用z-index值膏燃。而浮動(dòng)的東西不能用。
● z-index值沒(méi)有單位何什，就是一個(gè)正整數(shù)组哩。默認(rèn)的z-index值是0。
● 如果大家都沒(méi)有z-index值，或者z-index值一樣禁炒，那么誰(shuí)寫在HTML后面，誰(shuí)在上面能壓住別人霍比。定位了的元素幕袱，永遠(yuǎn)能夠壓住沒(méi)有定位的元素。
● 從父現(xiàn)象：父親的z-index小了悠瞬，兒子的z-index再大也沒(méi)用们豌。
position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
兩者都可以使元素位置發(fā)生偏移。
position：relative偏移之后浅妆，原來(lái)占據(jù)的空間還是占據(jù)望迎，旁邊的元素也不會(huì)移動(dòng)，就相當(dāng)于殼還在凌外，只是影子到處飄辩尊。
負(fù)margin偏移之后會(huì)影響周圍普通元素的位置。
BFC 是什么康辑？如何生成 BFC摄欲？BFC 有什么作用？舉例說(shuō)明
BFC英語(yǔ)是Block fomatting context疮薇，它是頁(yè)面中的一塊渲染區(qū)域胸墙，并且有一套渲染規(guī)則，它決定了其子元素將如何定位按咒，以及和其他元素的關(guān)系和相互作用迟隅，創(chuàng)建了 BFC的元素就是一個(gè)獨(dú)立的盒子。
如何生成BFC
float 為left|right
overflow 除了visible 以外的值（hidden励七，auto智袭，scroll ）
display ：table-cell|table-caption|inline-block| flex,|inline-flex
position值為absolute|fixed
fieldset元素
BFC作用
1.BFC可以阻止垂直外邊距折疊。
要解決垂直外邊距的折疊時(shí)呀伙，只要讓它們不在同一個(gè)BFC就好了补履，對(duì)于相鄰的兩個(gè)元素意義不大，對(duì)于嵌套元素來(lái)說(shuō)剿另，只要讓父元素設(shè)為BFC就可以防止內(nèi)部元素與父元素外邊距重疊了箫锤。
2.BFC不會(huì)折疊浮動(dòng)元素。
3.BFC可以包含浮動(dòng)元素雨女。利用這個(gè)特性谚攒，把父元素設(shè)置成BFC就可以清除浮動(dòng)了。
在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并氛堕？如何合并馏臭？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例
1.相鄰的兄弟姐妹元素
毗鄰的兩個(gè)兄弟元素之間的外邊距會(huì)塌陷
2.父子元素之間
3.空元素
4.以上三種的混合
避免外邊距疊加，只要破壞它的 4 個(gè)必要條件（2個(gè)或多個(gè)括儒、毗鄰绕沈、垂直方向、普通流）中的一個(gè)即可帮寻。
不讓相鄰元素外邊距合并只要把它們?cè)O(shè)置 float 或 inline-block 或 absolute即可乍狐。
父子外邊距合并范例：
兩個(gè)都設(shè)置了外邊距
結(jié)果：
里面元素的外邊距并不起作用。
整個(gè)嵌套元素的外邊距是30px,因?yàn)橥膺吘嗪喜?huì)合成邊距比較大的那一個(gè)固逗，所以是父親的外邊距30px.
總結(jié)：
1.浮動(dòng)元素和其他任何元素之間不發(fā)生外邊距疊加 (包括和它的子元素)
2.創(chuàng)建了 BFC 的元素不會(huì)和它的子元素發(fā)生外邊距疊加
3.絕對(duì)定位元素和其他任何元素之間不發(fā)生外邊距疊加(包括和它的子元素).
4.inline-block 元素和其他任何元素之間不發(fā)生外邊距疊加 (包括和它的子元素).
通俗的說(shuō)：
為父元素設(shè)置 BFC 或 padding 或 border
兄弟元素間設(shè)置 float 或 inline-block 或 absolute
寫結(jié)構(gòu)的時(shí)候最好用一個(gè)方向浅蚪，都是margin- top 或者都是margin- bottom
