浮動(dòng)元素有什么特征？對(duì)父容器、其他浮動(dòng)元素、普通元素、文字分別有什么影響?

浮動(dòng)元素脫離文檔流，當(dāng)一個(gè)元素設(shè)置成浮動(dòng)之后，不管是塊級(jí)元素還是行內(nèi)元素都可以設(shè)置寬高，如果沒有設(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)帶來的影響了。
2.clear:both;（但這種方法有一個(gè)非常大的、致命的問題，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)的特性來清除浮動(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)你沒有為一個(gè)元素指定定位方式時(shí)，默認(rèn)為static，也就是按照文檔的流式定位，將元素放到一個(gè)合適的地方。忽略top,left,right,bottom,和z-index的聲明。
2.position:relative;相對(duì)定位
相對(duì)定位，就是微調(diào)元素位置的。讓元素相對(duì)自己原來的位置，進(jìn)行位置調(diào)整。相對(duì)定位的元素不脫離文檔流，之前占用的位置依然空著，相對(duì)定位有坑，所以一般不用于做“壓蓋”效果。頁面中，效果極小。就兩個(gè)作用：

1. 微調(diào)元素
2. 做絕對(duì)定位的參考

Paste_Image.png

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)邊框做定位。

Paste_Image.png

不一定是相對(duì)定位，任何定位，都可以作為參考點(diǎn)

<div>  → 絕對(duì)定位
    <p></p>  → 絕對(duì)定位，將以div作為參考點(diǎn)。因?yàn)楦赣H定位了。
</div>

子絕父絕、子絕父相、子絕父固，都是可以給兒子定位的。但是，工程上子絕、父絕，沒有一個(gè)盒子在標(biāo)準(zhǔn)流里面了，所以頁面就不穩(wěn)固，沒有任何實(shí)戰(zhàn)用途。工程上，“子絕父相”有意義，父親沒有脫標(biāo)，兒子脫標(biāo)在父親的范圍里面移動(dòng)，如果父親和祖先都沒有定位，

    <div class=”box1”>  → 絕對(duì)定位
        <div class=”box2”>  → 相對(duì)定位
            <div class=”box3”>  → 沒有定位
                <p></p>  → 絕對(duì)定位，以box2為參考定位。
            </div>
        </div>
    </div>

如果沒有父級(jí)元素可以參照定位時(shí)，
絕對(duì)定位的參考點(diǎn)，如果用top描述，那么定位參考點(diǎn)就是頁面的左上角，而不是瀏覽器的左上角：

Paste_Image.png

如果用bottom描述，那么就是瀏覽器首屏窗口尺寸，對(duì)應(yīng)的頁面的左下角：

Paste_Image.png

4.position：fixed固定定位
固定定位，就是相對(duì)瀏覽器窗口定位。頁面如何滾動(dòng)，這個(gè)盒子顯示的位置不變。固定定位脫離文檔流！
當(dāng)固定導(dǎo)航欄的時(shí)候就可以使用固定定位。

z-index 有什么作用? 如何使用?

z-index值表示誰壓著誰。數(shù)值大的壓蓋住數(shù)值小的。
● 只有定位了的元素，才能有z-index值。也就是說，不管相對(duì)定位、絕對(duì)定位、固定定位，都可以使用z-index值。而浮動(dòng)的東西不能用。
● z-index值沒有單位，就是一個(gè)正整數(shù)。默認(rèn)的z-index值是0。
● 如果大家都沒有z-index值，或者z-index值一樣，那么誰寫在HTML后面，誰在上面能壓住別人。定位了的元素，永遠(yuǎn)能夠壓住沒有定位的元素。
● 從父現(xiàn)象：父親的z-index小了，兒子的z-index再大也沒用。

Paste_Image.png

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

兩者都可以使元素位置發(fā)生偏移。
position：relative偏移之后，原來占據(jù)的空間還是占據(jù)，旁邊的元素也不會(huì)移動(dòng)，就相當(dāng)于殼還在，只是影子到處飄。
負(fù)margin偏移之后會(huì)影響周圍普通元素的位置。

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

BFC英語是Block fomatting context，它是頁面中的一塊渲染區(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ì)于嵌套元素來說，只要讓父元素設(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ì)塌陷

Paste_Image.png

2.父子元素之間

Paste_Image.png

3.空元素

Paste_Image.png

4.以上三種的混合

Paste_Image.png

避免外邊距疊加，只要破壞它的 4 個(gè)必要條件（2個(gè)或多個(gè)、毗鄰、垂直方向、普通流）中的一個(gè)即可。
不讓相鄰元素外邊距合并只要把它們?cè)O(shè)置 float 或 inline-block 或 absolute即可。
父子外邊距合并范例：
兩個(gè)都設(shè)置了外邊距

Paste_Image.png

結(jié)果：
里面元素的外邊距并不起作用。

Paste_Image.png

整個(gè)嵌套元素的外邊距是30px,因?yàn)橥膺吘嗪喜?huì)合成邊距比較大的那一個(gè)，所以是父親的外邊距30px.

Paste_Image.png

總結(jié)：
1.浮動(dòng)元素和其他任何元素之間不發(fā)生外邊距疊加 (包括和它的子元素)
2.創(chuàng)建了 BFC 的元素不會(huì)和它的子元素發(fā)生外邊距疊加
3.絕對(duì)定位元素和其他任何元素之間不發(fā)生外邊距疊加(包括和它的子元素).
4.inline-block 元素和其他任何元素之間不發(fā)生外邊距疊加 (包括和它的子元素).
通俗的說：

為父元素設(shè)置 BFC 或 padding 或 border
兄弟元素間設(shè)置 float 或 inline-block 或 absolute
寫結(jié)構(gòu)的時(shí)候最好用一個(gè)方向，都是margin- top 或者都是margin- bottom