浮動(dòng)可以改變標(biāo)簽的默認(rèn)排列方式。浮動(dòng)元素常與標(biāo)準(zhǔn)流的父元素搭配使用.
網(wǎng)頁(yè)布局第一準(zhǔn)則:多個(gè)塊級(jí)元素縱向排列找標(biāo)準(zhǔn)流，多個(gè)塊級(jí)元素橫向排列找浮動(dòng)。
float屬性用于創(chuàng)建浮動(dòng)框，將其移動(dòng)到一邊，直到左邊緣或右邊緣觸及包含塊或另一個(gè)浮動(dòng)框的邊緣。
浮動(dòng)特性
1.浮動(dòng)元素會(huì)脫離標(biāo)準(zhǔn)流(脫標(biāo))
脫離標(biāo)準(zhǔn)普通流的控制,移動(dòng)到指定位置,且浮動(dòng)的盒子不再保留原先的位置
當(dāng)為粉色div設(shè)置浮動(dòng)后,其原有的位置空出,表現(xiàn)為壓住了原來(lái)在其下方的藍(lán)色div.
浮動(dòng)元素只能影響在其后面的標(biāo)準(zhǔn)流
粉色div為標(biāo)準(zhǔn)流獨(dú)占一行,藍(lán)色div另起一行且浮起不占原有位置,綠色標(biāo)準(zhǔn)流div占據(jù)藍(lán)色div的原有位置.
粉色浮動(dòng),藍(lán)色標(biāo)準(zhǔn)流div占據(jù)其原有位置且獨(dú)占一行,綠色浮動(dòng)div另起一行浮動(dòng)顯示.
2.浮動(dòng)的元素會(huì)一行內(nèi)顯示并且元素頂部對(duì)齊
若父級(jí)元素的寬度不夠,則會(huì)自動(dòng)換行,另起一行重新對(duì)齊排列.
3.浮動(dòng)的元素會(huì)具有行內(nèi)塊元素的特性
任何元素都可以浮動(dòng),浮動(dòng)的元素會(huì)具有行內(nèi)塊元素的特性.
清除浮動(dòng)
由于父級(jí)盒子很多情況下，不方便給高度，最好由子元素?fù)伍_(kāi). 但是子盒子浮動(dòng)又不占有位置，當(dāng)不設(shè)置父級(jí)盒子高度時(shí)，就會(huì)影響下面的標(biāo)準(zhǔn)流盒子,所以需要清除浮動(dòng)
1.額外標(biāo)簽法:浮動(dòng)元素的末尾添加一個(gè)清除浮動(dòng)的空標(biāo)簽(必須是塊元素).
<div style="clear: both;"></div>
2.為父元素添加 overflow:hidden;(屬性值為auto或者scroll也可) 缺點(diǎn)是無(wú)法顯示溢出的部分
3.:after偽元素法,相當(dāng)于額外標(biāo)簽法的升級(jí)版,在父元素里面的最后添加了一個(gè)空的塊元素.優(yōu)點(diǎn)是沒(méi)有真的增加標(biāo)簽,結(jié)構(gòu)簡(jiǎn)單.
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6,7專有 */
*zoom: 1;
}
4.雙偽元素清除浮動(dòng),代碼比偽元素法稍簡(jiǎn)潔.文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-701117.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.top {
width: 630px;
background-color: pink;
margin: 10px auto;
}
.top ul li {
float: left;
width: 150px;
height: 240px;
background-color: skyblue;
margin-right: 10px;
margin-bottom: 10px;
}
.top ul .last {
margin-right: 0px;
}
.bottom {
background-color: aquamarine;
height: 40px;
}
.clearfix::before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
/* IE6,7專有 */
*zoom: 1;
}
</style>
<body>
<div class="top clearfix">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</div>
<div class="bottom"></div>
</body>
</html>
顯示效果
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-701117.html
到了這里，關(guān)于CSS筆記(黑馬程序員pink老師前端)浮動(dòng),清除浮動(dòng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
黑馬程序員python教程](https://imgs.yssmx.com/Uploads/2024/02/723818-1.png)
