浮動(dòng)
網(wǎng)頁(yè)的布局方式
-
什么是網(wǎng)頁(yè)的布局方式?
- 網(wǎng)頁(yè)的布局方式其實(shí)就是指瀏覽器是如何對(duì)網(wǎng)頁(yè)中的元素進(jìn)行排版的
-
標(biāo)準(zhǔn)流(文檔流/普通流)排版方式
- 其實(shí)瀏覽器默認(rèn)的排版方式就是標(biāo)準(zhǔn)流的排版方式
- 在CSS中將元素分為三類, 分別是塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素
- 在標(biāo)準(zhǔn)流中有兩種排版方式, 一種是垂直排版, 一種是水平排版
- 垂直排版, 如果元素是塊級(jí)元素, 那么就會(huì)垂直排版
- 水平排版, 如果元素是行內(nèi)元素/行內(nèi)塊級(jí)元素, 那么就會(huì)水平排版
-
浮動(dòng)流排版方式
- 浮動(dòng)流是一種"半脫離標(biāo)準(zhǔn)流"的排版方式
- 浮動(dòng)流只有一種排版方式, 就是水平排版. 它只能設(shè)置某個(gè)元素左對(duì)齊或者右對(duì)齊
- 浮動(dòng)流是一種"半脫離標(biāo)準(zhǔn)流"的排版方式
-
注意點(diǎn):
- 浮動(dòng)流中沒(méi)有居中對(duì)齊, 也就是沒(méi)有center這個(gè)取值
- 在浮動(dòng)流中是不可以使用margin: 0 auto;
-
特點(diǎn):
- 在浮動(dòng)流中是不區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素的
- 無(wú)論是塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素都可以水平排版
- 在浮動(dòng)流中無(wú)論是塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素都可以設(shè)置寬高
- 綜上所述, 浮動(dòng)流中的元素和標(biāo)準(zhǔn)流中的行內(nèi)塊級(jí)元素很像
定位流排版方式
浮動(dòng)元素的脫標(biāo)
- 什么是浮動(dòng)元素的脫標(biāo)?
- 脫標(biāo): 脫離標(biāo)準(zhǔn)流
- 當(dāng)某一個(gè)元素浮動(dòng)之后, 那么這個(gè)元素看上去就像被從標(biāo)準(zhǔn)流中刪除了一樣, 這個(gè)就是浮動(dòng)元素的脫標(biāo)
- 浮動(dòng)元素脫標(biāo)之后會(huì)有什么影響?
- 如果前面一個(gè)元素浮動(dòng)了, 而后面一個(gè)元素沒(méi)有浮動(dòng) , 那么這個(gè)時(shí)候前面一個(gè)元就會(huì)蓋住后面一個(gè)元素
浮動(dòng)元素排序規(guī)則
- 浮動(dòng)元素排序規(guī)則
- 相同方向上的浮動(dòng)元素, 先浮動(dòng)的元素會(huì)顯示在前面, 后浮動(dòng)的元素會(huì)顯示在后面
<style>
.box1{
float: left;
width: 50px;
height: 50px;
background-color: red;
}
.box2{
float: left;
width: 100px;
height: 100px;
background-color: pink;
}
.box3{
float: left;
width: 150px;
height: 150px;
background-color: yellow;
}
</style>
- 不同方向上的浮動(dòng)元素, 左浮動(dòng)會(huì)找左浮動(dòng), 右浮動(dòng)會(huì)找右浮動(dòng)
<style>
.box1{
float: left;
width: 50px;
height: 50px;
background-color: red;
}
.box2{
float: right;
width: 100px;
height: 100px;
background-color: pink;
}
.box3{
float: left;
width: 150px;
height: 150px;
background-color: yellow;
}
.box4{
float: right;
width: 200px;
height: 200px;
background-color: tomato;
}
</style>
- 浮動(dòng)元素浮動(dòng)之后的位置, 由浮動(dòng)元素浮動(dòng)之前在標(biāo)準(zhǔn)流中的位置來(lái)確定
<style>
.box1{
float: left;
width: 50px;
height: 50px;
background-color: red;
}
.box2{
width: 100px;
height: 100px;
background-color: pink;
}
.box3{
float: left;
width: 150px;
height: 150px;
background-color: yellow;
}
.box4{
float: left;
width: 200px;
height: 200px;
background-color: tomato;
}
</style>
浮動(dòng)元素貼靠現(xiàn)象
-
什么是浮動(dòng)元素貼靠現(xiàn)象?
- 如果父元素的寬度能夠顯示所有浮動(dòng)元素, 那么浮動(dòng)的元素會(huì)并排顯示
- 如果父元素的寬度不能顯示所有浮動(dòng)元素, 那么會(huì)從最后一個(gè)元開始往前貼靠
- 如果貼靠了前面所有浮動(dòng)元素之后都不能顯示, 最終會(huì)貼靠到父元素的左邊或者右邊
浮動(dòng)元素字圍現(xiàn)象
- 什么是浮動(dòng)元素字圍現(xiàn)象?
- 浮動(dòng)元素不會(huì)擋住沒(méi)有浮動(dòng)元素中的文字, 沒(méi)有浮動(dòng)的文字會(huì)自動(dòng)給浮動(dòng)的元素讓位置,這個(gè)就是浮動(dòng)元素字圍現(xiàn)象
div{
float: left;
width: 100px;
height: 100px;
/*background-color: red;*/
border: 1px solid #000;
}
p{
width: 500px;
height: 500px;
background-color: yellow;
}
- 應(yīng)用場(chǎng)景
- 圖文混排
