關(guān)于float的一些用法
左懸浮: float:left;
右懸浮:float:right;
float用法
float的用途比較廣, 這里簡(jiǎn)單的介紹下集中常有的用法:
- 在接觸到浮動(dòng)前,我會(huì)去設(shè)置一些inline-block, block的屬性配合著div的鑲嵌 去完成頁(yè)面的排版. 而后接觸到了浮動(dòng)這一屬性, 直接讓元素漂浮起來簡(jiǎn)易了很多,懸浮中不區(qū)分塊級(jí)元素(block),行內(nèi)元素(inline),或者是行內(nèi)塊元素(inline-block). float也會(huì)隨著父元素width大小的改變而自動(dòng)排版,eg.直接調(diào)整可視窗口,會(huì)將元素?cái)D到下一行.
- 此外, 就剛了解的SEO優(yōu)化而言, 由于瀏覽器的解析是從上而下的. 因此很多時(shí)候重要的內(nèi)容寫在前面,把一些不重要的或者是廣告什么的寫在后面.但是又想讓用戶注意到廣告,因此,很多時(shí)候把主內(nèi)容居中排列, 廣告這些的左右懸浮, 相信經(jīng)常瀏覽網(wǎng)頁(yè)的朋友的也注意到了這點(diǎn)接下來來講講懸浮的一些書寫和效果吧
如果子元素懸浮了,會(huì)造成父元素的高度塌陷.這塊涉及到了清除懸浮,下一章會(huì)提及清除懸浮的講解
那么言歸正傳,
第一個(gè)現(xiàn)象 float=inline-block
懸浮會(huì)是4個(gè)方塊變成行內(nèi)塊模式的樣式呈現(xiàn):如下圖所示
<style>
div{
width:200px;
height:200px;
background-color: pink;
border:1px solid black;
float:left;
}
</style>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
第二現(xiàn)象:
如下圖所示, 由于第一個(gè)懸浮起來了,因此第二個(gè)塊元素會(huì)呈現(xiàn)在第一個(gè)下面.
但是后面一個(gè)元素懸浮起來,不會(huì)越過到前面一個(gè)元素上面,如第四個(gè)塊元素懸浮,但是第三個(gè)沒有懸浮.第四季塊元素保持在原來位置上.
<style>
.first-one{
float:left;
background-color:green;
}
.second-one{
background-color:purple;
}
.third-one{
background-color:blue;
}
.fourth-one{
float:left;
background-color:grey;
}
div{
width:200px;
height:200px;
background-color: pink;
border:1px solid black;
font-size:30px;
}
</style>
<body>
<div class= "first-one"></div>
<div class= "second-one"></div>
<div class= "third-one"></div>
<div class="fourth-one"></div>
</body>
第三個(gè)現(xiàn)象:
如果元素全部漂浮, 父元素剩余寬度不夠支持子元素在該行排列 那么他會(huì)向上一級(jí)靠齊
本文轉(zhuǎn)自：https://segmentfault.com/a/1190000022669455
總結(jié)
到此這篇關(guān)于淺析HTML 懸浮float的用法的文章就介紹到這了,更多相關(guān)html 懸浮float內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
