當(dāng)前位置:首頁(yè) >  站長(zhǎng) >  編程技術(shù) >  正文

淺析HTML 懸浮float的用法

 2020-12-21 16:13  來源: 腳本之家   我來投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過

float的用途比較廣, 本文主要給大家介紹HTML 懸浮float的一些常有用法,通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

關(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)文章,希望大家以后多多支持腳本之家!

來源:腳本之家

鏈接:https://www.jb51.net/web/725749.html

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)標(biāo)簽
html

相關(guān)文章

熱門排行

信息推薦