css浮動(dòng)的屬性是指什么-創(chuàng)新互聯(lián)

小編給大家分享一下css浮動(dòng)的屬性是指什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、大邑縣ssl等。為上千多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的大邑縣網(wǎng)站制作公司

css浮動(dòng)的屬性是指“float”屬性，用于指定一個(gè)盒子（元素）是否應(yīng)該浮動(dòng)，定義朝哪個(gè)方向浮動(dòng)。元素使用了float屬性后，可以使該元素脫離標(biāo)準(zhǔn)流本身，浮動(dòng)在其他元素之上，使其不再占用原本屬于該元素的空間。

1. 頁面布局方式

頁面布局方式，主要包含：文檔流、浮動(dòng)層、float屬性。

1.1 文檔流

HTML頁面的標(biāo)準(zhǔn)文檔流(默認(rèn)布局)是：從上到下，從左到右，遇塊(塊級(jí)元素)換行。

1.2 浮動(dòng)層

浮動(dòng)層：給元素的float屬性賦值后，就是脫離文檔流，進(jìn)行左右浮動(dòng)，緊貼著父元素(默認(rèn)為body文本區(qū)域)的左右邊框。

而此浮動(dòng)元素在文檔流空出的位置，由后續(xù)的(非浮動(dòng))元素填充上去：塊級(jí)元素直接填充上去，若跟浮動(dòng)元素的范圍發(fā)生重疊，浮動(dòng)元素覆蓋塊級(jí)元素。內(nèi)聯(lián)元素：有空隙就插入。

1.3 float 屬性介紹

float屬性：用于指定一個(gè)盒子（元素）是否應(yīng)該浮動(dòng)，可以定義元素朝哪個(gè)方向浮動(dòng)。

元素使用了float屬性后，可以使該元素脫離標(biāo)準(zhǔn)流本身，浮動(dòng)在其他元素之上，使其不再占用原本屬于該元素的空間，這樣會(huì)導(dǎo)致后面的元素上移并占用原本屬于該元素的空間。

注意： 絕對(duì)定位的元素忽略float屬性！

屬性值：

① left ：元素向左浮動(dòng)。

② right ：元素向右浮動(dòng)。

③ none ：默認(rèn)值。

④ inherit ：從父元素繼承float屬性。

1.4 示例

css浮動(dòng)的屬性是指什么

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>2.3-float屬性</title>
    <style type="text/css">
        #a
        {
            background-color:Red;
            height:50px;
            width:100px;
        }
        #b
        {
            background-color:Yellow;    
            height:50px;
            width:200px;
        }
        #c
        {
            background-color:Blue;   
            height:50px;
            width:300px;
         }
         #d
         {
            background-color:Gray;
            height:50px;
            width:400px;
         }

    </style>
</head>
<body>
<div id=a >div-a</div>
<div id=b>div-b</div>
<div id=c>div-c</div>
<input type="text" value="input1"  />
<input type="text" value="input2" />
<input type="text" value="input3 " />
<div id=d>div-d</div>
<input type="text" value="input4 " />
</body>
</html>

2. float:left

說明：元素向左浮動(dòng)。

2.1 代碼變更

input2 添加：float:left

div-b 添加：float:left

div-d 添加：float:left

2.2 變更后視圖

① 瀏覽器的寬度“不夠長”時(shí)

　　css浮動(dòng)的屬性是指什么

② 瀏覽器的寬度"夠長"時(shí)

css浮動(dòng)的屬性是指什么

2.3 結(jié)論

當(dāng)前元素分類(float:left)

下一個(gè)緊鄰元素分類(不含float)

結(jié)論

塊級(jí)元素(a)

塊級(jí)元素(b)

b會(huì)填充a遺留下來的空間，a會(huì)和b發(fā)生重疊，a的圖層在上面。

內(nèi)聯(lián)元素(b)

b會(huì)緊跟在a的后面。并根據(jù)自身內(nèi)聯(lián)元素的特點(diǎn)，是否換行。

內(nèi)聯(lián)元素(a)

塊級(jí)元素(b)

b不會(huì)跟隨a的移動(dòng)。

內(nèi)聯(lián)元素(b)

b會(huì)緊跟在a的后面。并根據(jù)自身內(nèi)聯(lián)元素的特點(diǎn)，是否換行。

3. float:right


說明：元素向右浮動(dòng)。

3.1 代碼變更

input2元素：添加 float:right

div-b 添加：float:right

div-d 添加：float:right

3.2 變更后視圖

① 瀏覽器的寬度“不夠長”時(shí)

css浮動(dòng)的屬性是指什么

② 瀏覽器的寬度"夠長"時(shí)

css浮動(dòng)的屬性是指什么

3.3 結(jié)論

當(dāng)前元素分類(float:right)

下一個(gè)緊鄰元素分類(不包含float)

結(jié)論

塊級(jí)元素(a)

塊級(jí)元素(b)

b會(huì)填充a遺留下來的空間，若a會(huì)和b發(fā)生重疊(父容器寬度減少)，a的圖層在上面。

內(nèi)聯(lián)元素(b)

b會(huì)填充a遺留下來的空間。

內(nèi)聯(lián)元素(a)

塊級(jí)元素(b)

b不會(huì)跟隨a的移動(dòng)。

內(nèi)聯(lián)元素(b)

b會(huì)填充a遺留下來的空間。

4. 相鄰元素含有float屬性


因內(nèi)聯(lián)元素的特性，好別把內(nèi)聯(lián)元素與塊級(jí)元素相鄰使用float屬性。

下面都以塊級(jí)元素為例：

默認(rèn)視圖：

css浮動(dòng)的屬性是指什么

4.1 float:left

　　給這三個(gè)div都添加 float:left

4.1.1 視圖

　?、贋g覽器的寬度"足夠長"

　　css浮動(dòng)的屬性是指什么

　　②瀏覽器的寬度"不夠長"

　　css浮動(dòng)的屬性是指什么

4.1.2 結(jié)論

　?、?相鄰的浮動(dòng)元素，left屬性最前面的元素，排在最左面。

　?、?成為浮動(dòng)元素后，在浮動(dòng)層擁有內(nèi)聯(lián)元素的"特性"，當(dāng)多個(gè)浮動(dòng)元素1排容不下時(shí)，就換行。

4.2 float:right

　　給這三個(gè)div都添加 float:right

4.2.1 視圖

　　①瀏覽器的寬度"足夠長"

css浮動(dòng)的屬性是指什么

　?、跒g覽器的寬度"不夠長"

　　css浮動(dòng)的屬性是指什么

4.2.2 結(jié)論

　?、?相鄰的浮動(dòng)元素，right屬性最前面的元素，排在最右面。

　　Ⅱ 成為浮動(dòng)元素后，在浮動(dòng)層擁有內(nèi)聯(lián)元素的"特性"，當(dāng)多個(gè)浮動(dòng)元素1排容不下時(shí)，就換行。

4.3 height高度不等的塊級(jí)元素

把div-a的height值設(shè)為大于div-b，三個(gè)div都添加 float:left后：

4.3.1 視圖

　?、贋g覽器的寬度"足夠長"

　　css浮動(dòng)的屬性是指什么

　?、跒g覽器寬度縮小時(shí)

　　css浮動(dòng)的屬性是指什么

　?、蹫g覽器寬度進(jìn)一步縮小時(shí)

　　css浮動(dòng)的屬性是指什么

4.3.2 結(jié)論

　?、?height不相等的div浮動(dòng)元素排序時(shí)，照擁有內(nèi)聯(lián)元素的"特性"，當(dāng)多個(gè)浮動(dòng)元素1排容不下時(shí)，就換行。

4.3.3 解決瀏覽器寬度縮小變形

　　把添加float的屬性的div元素嵌入在一個(gè)div中，并給此div添加width和height屬性。瀏覽器寬度縮小時(shí)，也不會(huì)發(fā)生變形。

　　css浮動(dòng)的屬性是指什么

以上是“css浮動(dòng)的屬性是指什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文題目：css浮動(dòng)的屬性是指什么-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址：http://bm7419.com/article4/dicooe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、做網(wǎng)站、微信公眾號(hào)、定制開發(fā)、外貿(mào)建站、網(wǎng)頁設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

綿陽服務(wù)器托管