【9】CSS（浮動淮菠、行內(nèi)元素及行內(nèi)塊元素布局特點）

1 浮動

1.1 浮動簡介

最初用于實現(xiàn)文字環(huán)繞圖片或其他元素，后來成為主流的頁面布局方式杨蛋。

1.2 浮動元素的特點

行內(nèi)元素兜材、行內(nèi)塊元素理澎、塊級元素均可設(shè)置浮動屬性 float逞力，值為：none(默認(rèn)) / left / right，設(shè)置值為 left 或 right 后糠爬，可實現(xiàn)元素向左浮動或向右浮動寇荧，浮動后的元素不同于原來的三種顯示模式，具有自己的特點：

1执隧、浮動的元素會脫離文檔流揩抡，多個浮動的兄弟元素會水平排列、自動換行镀琉。
2峦嗤、浮動的元素可以設(shè)置寬高，但默認(rèn)寬高被其內(nèi)容撐開屋摔。
3烁设、浮動的元素可以完美地設(shè)置4個方向的內(nèi)外邊距，且不存在 margin 塌陷 和 margin合并 的問題钓试。

1.3 浮動元素產(chǎn)生的影響

① 元素浮動之后產(chǎn)生的影響

浮動元素對兄弟元素的影響

1装黑、浮動元素對前面的兄弟元素沒有影響；
2弓熏、浮動元素對后面的兄弟元素有影響：后面的元素會占據(jù)浮動元素原來的位置恋谭，顯示在浮動元素的下面，但文字會被擠出來挽鞠。故實際布局中疚颊，兄弟元素通常一起浮動。

浮動元素對父元素的影響

浮動元素?zé)o法撐起父元素的高度信认，這種現(xiàn)象也稱為父元素高度塌陷材义。

② 解決浮動的影響（清除浮動）

解決浮動元素對后面兄弟元素的影響：

給第一個受浮動元素影響的元素設(shè)置 CSS 屬性：clear: both;

解決浮動元素對父元素的影響：

方案一：給父元素也設(shè)置浮動。缺點：會引起新的問題狮杨。
方案二：給父元素設(shè)置固定高度母截。缺點：高度需自己計算。
方案三：給父元素設(shè)置 CSS 屬性：overflow: hidden/auto/scroll (除visible之外的都可以)橄教。 
方案四：給父元素添加最后一個子元素（要求：高度為 0 的塊級元素）清寇，給該子元素設(shè)置 clear: both; 喘漏。
方案五：給父元素設(shè)置 after 偽元素，給偽元素設(shè)置 clear: both; ,原理同方案四华烟，動態(tài)地在最后面添加一個子元素翩迈，推薦使用。設(shè)置方法如下：

.類名::after {
    /* content 設(shè)置偽元素中的文本內(nèi)容盔夜，為必須設(shè)置的樣式负饲，只有設(shè)置該屬性偽元素才生效 */
    content: "";
    /* 設(shè)置為塊級元素，偽元素默認(rèn)是行內(nèi)元素*/
    display: block;
    /* 清除浮動 */
    clear: both;
}

1.4 浮動相關(guān)的 CSS 屬性

CSS 屬性	功能	屬性值
float	設(shè)置元素浮動	none：不浮動喂链，默認(rèn)值 left：靠左浮動 right：靠右浮動
clear	清除前面浮動元素的影響	left：清除左浮動影響 right：清楚右浮動影響 both：清楚左右浮動的影響

2 行內(nèi)返十、行內(nèi)塊元素在布局中的特點

2.1 文本屬性作用于行內(nèi)元素和行內(nèi)塊元素（行內(nèi)、行內(nèi)塊可被其父元素當(dāng)作文本處理）

① 讓行內(nèi)元素椭微、行內(nèi)塊元素在其父元素中水平居中

給行內(nèi)元素洞坑、行內(nèi)塊元素的父元素設(shè)置 text-align: center;

② 讓行內(nèi)元素、行內(nèi)塊元素在其父元素中垂直居中

給行內(nèi)元素蝇率、行內(nèi)塊元素的父元素設(shè)置行高 line-height: 父元素高度;

如果行內(nèi)元素迟杂、行內(nèi)塊元素中還有文字內(nèi)容，還要給它們設(shè)置vertical-align: center;本慕，因為默認(rèn)行內(nèi)排拷、行內(nèi)塊元素是像文本一樣，以基線為準(zhǔn)居中于父元素中锅尘。

2.2 行內(nèi)元素监氢、行內(nèi)塊元素之間的空白

① 元素之間的空白（左右）

產(chǎn)生原因：書寫代碼的時候，每一行代碼后面有換行符鉴象，換行符被瀏覽器解析為空白

解決方案：

方案一：每行代碼后面不再寫換行（實際中不可行）忙菠。
方案二：給父元素設(shè)置字體大小為0，再給行內(nèi)元素纺弊、行內(nèi)塊元素單獨設(shè)置字體大小牛欢。

② 元素底部的空白（如：圖片的幽靈空白）

產(chǎn)生原因：行內(nèi)塊元素默認(rèn)沿著文字基線對齊，幽靈空白其實是基線與底線的距離