CSS布局-浮動布局
時間：2023-09-06 22:48:02 | 來源：網(wǎng)站運營
時間：2023-09-06 22:48:02 來源：網(wǎng)站運營
CSS布局-浮動布局：當一個元素浮動之后，它會被移出正常的文檔流，然后向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到
另外一個浮動的元素。
一旦讓該div浮動起來，立刻會像inline元素一樣產(chǎn)生包裹性，寬度會跟隨內(nèi)容自適應(yīng)。（這也是通常float元素需要手動指定width的原因）
浮動規(guī)則
- 浮動元素會被推到他的容器的邊緣。
- 任何浮動元素都會出現(xiàn)在他之前的浮動元素的旁邊或是下方。如果元素都是左浮動，那么第二個元素將會出現(xiàn)在第一個元素的右邊，如果都是右浮動，第二個元素會出現(xiàn)在第一個元素的左邊。
- 左浮動的盒子不能出現(xiàn)在右浮動盒子的右邊。
- 浮動元素不能高過他的容器的上邊緣（當涉及到塌陷的邊距這將會更復(fù)雜，請參考最初的規(guī)則）。
- 浮動元素不能比前一個塊級元素或浮動元素高。
- 浮動元素不能高過前一行內(nèi)聯(lián)元素。
- 靠著另一個浮動元素的浮動元素不能超出自己的父容器邊緣。
- 一個浮動的盒子必須盡可能的高的放置。
- 一個左浮動的盒子必須盡可能左的放置，一個右浮動的盒子要盡可能的右的放置。盡可能高的位置的優(yōu)先級比左右高。
浮動影響
包裹性包裹性就是父元素的寬度會收縮到和內(nèi)部元素寬度一樣。
浮動之所以會產(chǎn)生包裹性這樣的效果是因為
float屬性會改變元素display屬性最終的計算值。
設(shè)置float前的display屬性——》設(shè)置浮動后的display屬性計算值
- inline——》block
- inline-block——》block
- inline-table——》table
- table-row——》block
- table-row-group——》block
- table-column——》block
- table-column-group——》block
- table-caption——》block
- table-header-group——》block
- table-footer-group——》blcok
- flex——》
flex - inline-flex——》
inline-flex【inline-flex在chrome下測試，float后display:flex】 - other——》unchanged
破壞性這里破壞性是指元素浮動后可能導(dǎo)致父元素高度塌陷。
其他破壞性的屬性：
- display:none
- position:absolute/fixed/sticky
浮動破壞性原理：
因為浮動元素被從文檔正常流中移除了，父元素當然還處在正常流中，所以父元素不能被浮動元素撐大。
清除浮動
每種清除浮動的方法都有弊端，權(quán)衡后推薦用法：
.clearfix:after{
content:"";
display:block;
height:0;
overflow:hidden;
clear:both;
}
/*兼容IE6和IE7*/
.clearfix{
*zoom:1;
}
float布局和inline-block布局對比
浮動和inline-block都能讓元素排成一排，那么應(yīng)該如何抉擇？下面對比一下。
- 文檔流：浮動元素脫離正常流，讓文字環(huán)繞。inline-block仍然在正常流中。
- 水平位置：不能通過給父元素設(shè)置text-align:center讓浮動元素無法水平居中【因為脫離文檔流】，而inline-block可以。
- 垂直對齊：浮動元素緊貼頂部，inline-block默認基線對齊，可通過vertical-align調(diào)整。
- 空白：浮動忽略空白元素彼此緊靠，inline-block保留空白。
在線咨詢
