display

我們不能為行內(nèi)元素設(shè)置width、height、margin-top和margin-bottom。

我們可以通過(guò)修改display來(lái)修改元素的性質(zhì)。

可選值：

block：設(shè)置元素為塊元素inline：設(shè)置元素為行內(nèi)元素inline-block：設(shè)置元素為行內(nèi)塊元素none：隱藏元素（元素將在頁(yè)面中完全消失）visibility

visibility屬性主要用于元素是否可見(jiàn)。

和display不同，使用visibility隱藏一個(gè)元素，隱藏后其在文檔中所占的位置會(huì)依然保持，不會(huì)被其他元素覆蓋。

可選值：

visible：可見(jiàn)的hidden：隱藏的overflow

當(dāng)相關(guān)標(biāo)簽里面的內(nèi)容超出了樣式的寬度 和高度是，就會(huì)發(fā)生一些奇怪的事情，瀏覽器會(huì)讓內(nèi)容溢出盒子。

可以通過(guò)overflow來(lái)控制內(nèi)容溢出的情況。

可選值：

visible：默認(rèn)值scroll：添加滾動(dòng)條auto：根據(jù)需要添加滾動(dòng)條hidden：隱藏超出盒子的內(nèi)容文檔流

文檔流指的是文檔中可現(xiàn)實(shí)的對(duì)象在排列時(shí)所占用的位置。

將窗體自上而下分成一行行，并在每行中按從左至右的順序排 放元素，即為文檔流。

也就是說(shuō)在文檔流中元素默認(rèn)會(huì)緊貼到上一個(gè)元素的右邊，如 果右邊不足以放下元素，元素則會(huì)另起一行，在新的一行中繼 續(xù)從左至右擺放。

這樣一來(lái)每一個(gè)塊元素都會(huì)另起一行，那么我們?nèi)绻朐谖臋n 流中進(jìn)行布局就會(huì)變得比較麻煩。

浮動(dòng)

所謂浮動(dòng)指的是使元素脫離原來(lái)的文本流，在父元素中浮動(dòng)起來(lái)。

浮動(dòng)使用float屬性。

可選值：

none：不浮動(dòng)left：向左浮動(dòng)right：向右浮動(dòng)

塊級(jí)元素和行內(nèi)元素都可以浮動(dòng)，當(dāng)一個(gè)行內(nèi)元素浮動(dòng)以后將會(huì)自動(dòng)變?yōu)橐粋€(gè)塊級(jí)元素。

當(dāng)一個(gè)塊級(jí)元素浮動(dòng)以后，寬度會(huì)默認(rèn)被內(nèi)容撐開(kāi)，所以當(dāng)漂浮一個(gè)塊級(jí)元素時(shí)我們都會(huì)為其指定一個(gè)寬度。

當(dāng)一個(gè)元素浮動(dòng)以后，其下方的元素會(huì)上移。元素中的內(nèi)容將會(huì)圍繞 在元素的周?chē)?/p>

浮動(dòng)會(huì)使元素完全脫離文本流，也就是不再在文檔中在占用位置。

元素設(shè)置浮動(dòng)以后，會(huì)一直向上漂浮直到遇到父元素的邊界或者其他 浮動(dòng)元素。

元素浮動(dòng)以后即完全脫離文檔流，這時(shí)不會(huì)再影響父元素的高度。也就是浮動(dòng)元素不會(huì)撐開(kāi)父元素。

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

清除浮動(dòng)

clear屬性可以用于清除元素周?chē)母?dòng)對(duì)元素的影響。

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

可選值：

left：忽略左側(cè)浮動(dòng)right：忽略右側(cè)浮動(dòng)both：忽略全部浮動(dòng)none：不忽略浮動(dòng)，默認(rèn)值定位