BFC

開啟后具有特性：

1.父元素的垂直外邊距不會和子元素重疊

2.開啟BFC的元素不會被浮動元素所覆蓋

3.開啟BFC的元素可以包含浮動的子元素

如何開啟元素的BFC

1.設(shè)置元素浮動

2.設(shè)置元素絕對定位

3.設(shè)置元素為inline-block

4.將元素的overflow設(shè)置為一個非visible的值

浮動

當(dāng)一個元素浮動以后，其下方的元素會上移。元素中的內(nèi)容將會圍繞在元素的周圍。

浮動會使元素完全脫離文本流，也就是不再在文檔中在占用位置。元素設(shè)置浮動以后，會一直向上漂浮直到遇到父元素的邊界或者其他浮動元素。

元素浮動以后即完全脫離文檔流，這時不會再影響父元素的高度。也就是浮動元素不會撐開父元素。

浮動元素默認(rèn)會變?yōu)閴K元素，即使設(shè)置display:inline以后其依然是個塊元素。

清除浮動

clear屬性可以用于清除元素周圍的浮動對元素的影響。

也就是元素不會因?yàn)樯戏匠霈F(xiàn)了浮動元素而改變位置。

可選值：left：忽略左側(cè)浮動? ? ? ? right：忽略右側(cè)浮動? ? ?both：忽略全部浮動? ? ? ? ? none：不忽略浮動，默認(rèn)值

定位

position屬性可以控制Web瀏覽器如何以 及在何處顯示特定的元素。

可以使用position屬性把一個元素放置到網(wǎng)頁中的任何位置。

可選值：static? ?relative? ? ? absolute? ? ? ?fixed

相對定位

每個元素在頁面的文檔流中都有一個自然位置。相對于這個位置對元素進(jìn)行移動就稱為相對定位。周 圍的元素完全不受此影響。

當(dāng)將position屬性設(shè)置為relative時，則開啟了元素的相對定位。

當(dāng)開啟了相對定位以后，可以使用top、right、?bottom、left四個屬性對元素進(jìn)行定位。

相對定位的特點(diǎn)：

如果不設(shè)置元素的偏移量，元素位置不會發(fā)生改變。相對定位不會使元素脫離文本流。元素在文本流中的位置不會改變。

相對定位不會改變元素原來的特性。

相對定位會使元素的層級提升，使元素可以覆蓋文 本流中的元素。

絕對定位

絕對定位指使元素相對于html元素或離他最近的祖先定位元素進(jìn)行定位。

當(dāng)將position屬性設(shè)置為absolute時，則開啟了元素的絕對定位。

當(dāng)開啟了絕對定位以后，可以使用top、right、 bottom、left四個屬性對元素進(jìn)行定位。

絕對定位的特點(diǎn)

絕對定位會使元素完全脫離文本流。?

絕對定位的塊元素的寬度會被其內(nèi)容撐開。??

絕對定位會使行內(nèi)元素變成塊元素。

一般使用絕對定位時會同時為其父元素指定一 個相對定位，以確保元素可以相對于父元素進(jìn) 行定位。