真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

<small id="u04ue"></small>

<tr id="u04ue"></tr>

重慶分公司

重慶分公司

028-86922220

CSS怎么實現(xiàn)元素浮動和清除浮動-創(chuàng)新互聯(lián)

這篇文章主要介紹CSS怎么實現(xiàn)元素浮動和清除浮動，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

10年積累的網(wǎng)站建設(shè)、成都網(wǎng)站制作經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先做網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有霍山免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

浮動基本介紹

在標(biāo)準文檔流中元素分為2種，塊級元素和行內(nèi)元素，如果想讓一些元素既要有塊級元素的特點也同時保留行內(nèi)元素特點，只能讓這些元素脫離標(biāo)準文檔流即可。
浮動可以讓元素脫離標(biāo)準文檔流，可以實現(xiàn)讓多個元素排在同一行，并且可以設(shè)置寬高度。
其實浮動是通過float屬性來實現(xiàn)的。
float屬性值說明表：

屬性值	描述
left	設(shè)置元素向左浮動。
right	設(shè)置元素向右浮動。

右浮動實踐

讓我們進入右浮動的實踐，實踐內(nèi)容如：將class屬性值為.box1元素設(shè)置為右浮動。
在進入有浮動實踐之前我們先看看要浮動元素結(jié)構(gòu)是什么。

代碼塊

結(jié)果圖

CSS怎么實現(xiàn)元素浮動和清除浮動

為什么結(jié)果圖是一條邊框線呢？因為在div標(biāo)簽中還沒有內(nèi)容呢，現(xiàn)在我們將子div標(biāo)簽設(shè)置寬高度為100px像素并且添加背景顏色。

代碼塊

結(jié)果圖

CSS怎么實現(xiàn)元素浮動和清除浮動

為什么會排列為3行呢，因為3個div標(biāo)簽都是塊級元素。
現(xiàn)在我們將class屬性值為.box1的元素設(shè)置為右浮動。

代碼塊

結(jié)果圖

CSS怎么實現(xiàn)元素浮動和清除浮動

注意：現(xiàn)在我們發(fā)現(xiàn)calss屬性值為.box元素高度變矮了，這就說明了（浮動元素它已經(jīng)脫離了標(biāo)準文檔流，不再占用空間了）、并且向右浮動，浮動到自身的父元素的邊緣位置就停止了浮動。

左浮動實踐

讓我們進入左浮動的實踐，實踐內(nèi)容如：將class屬性值為.box1元素設(shè)置為左浮動。

代碼塊

結(jié)果圖

CSS怎么實現(xiàn)元素浮動和清除浮動

我們先理解浮動的原理之后再解釋下class屬性值為.box2元素看不見的原因。
現(xiàn)在筆者給大家看2張實踐結(jié)果圖如：

結(jié)果圖A

CSS怎么實現(xiàn)元素浮動和清除浮動

結(jié)果圖B

CSS怎么實現(xiàn)元素浮動和清除浮動

通過這2張結(jié)果圖我們可以把浮動簡單的理解為“漂”舉例：
假設(shè)class屬性值為.box是一個池塘，3個子元素都是能夠漂浮在池塘水面上的東西，現(xiàn)在我們將calss屬性值為.box1元素浮動起來，漂在池塘水面上，是不是就不再占用池塘內(nèi)的空間了。
既然我們理解為“漂”它一定是漂浮在池塘水面之上，但是沒有浮動的元素在池塘水面之內(nèi)，所以class屬性值為.box2元素看不見，并不代表它不存在只是被class屬性值為.box1元素給遮擋住了，現(xiàn)在我們將class屬性值為.box2元素寬度設(shè)置為150px像素。

代碼塊

結(jié)果圖

CSS怎么實現(xiàn)元素浮動和清除浮動

注意：事實證明class屬性值為.box2元素是存在的。

下面我們將calss屬性值為.box2元素設(shè)置為左浮動看看有什么不一樣的效果

代碼塊

結(jié)果圖

CSS怎么實現(xiàn)元素浮動和清除浮動

但是class屬性值為.box2的元素左浮動并沒有左浮動到本身父元素的邊緣位置，為什么在class屬性值為.box1后面呢？因為父元素已經(jīng)有了浮動的子元素后面的子元素在浮動就浮動到前面浮動的元素之后。
現(xiàn)在我們將class屬性值為.box3的元素設(shè)置為左浮動，看看有什么不一樣的效果。

代碼塊

結(jié)果圖

CSS怎么實現(xiàn)元素浮動和清除浮動

注意：浮動元素浮動以后，其父元素不再將浮動的子元素包裹在父元素之內(nèi)，所以結(jié)果圖出現(xiàn)一條黑色的邊框線，若有不明白的看第一個實踐內(nèi)容。

將行內(nèi)元素設(shè)置浮動

如果我們給行內(nèi)元素設(shè)置了浮動，行內(nèi)元素就擁有了塊級元素的特點。
讓我們進入行內(nèi)元素設(shè)置浮動實踐，實踐內(nèi)容如：將div標(biāo)簽中的span標(biāo)簽設(shè)置為左浮動。
在設(shè)置左浮動之前我們先看看給span標(biāo)簽設(shè)置寬高度和背景顏色有什么效果。

代碼塊





    
    
    
    浮動
    

  

  
    微笑是最初的信仰1
    微笑是最初的信仰2
    微笑是最初的信仰3

結(jié)果圖

CSS怎么實現(xiàn)元素浮動和清除浮動

現(xiàn)在發(fā)現(xiàn)我們給span標(biāo)簽設(shè)置了寬高度為100px像素并沒有生效，因為現(xiàn)在span標(biāo)簽還是行內(nèi)元素。
現(xiàn)在我們給span標(biāo)簽設(shè)置左浮動，然后我們在看看效果如何。

代碼塊





    
    
    
    浮動
    

  

  
    微笑是最初的信仰1
    微笑是最初的信仰2
    微笑是最初的信仰

結(jié)果圖

CSS怎么實現(xiàn)元素浮動和清除浮動

注意：行內(nèi)元素設(shè)置為浮動之后就擁有了塊級元素的特點。

設(shè)置浮動總結(jié)

浮動的特點如：
浮動元素脫離了標(biāo)準的文檔流，不再占用父元素的任何空間。
浮動元素比標(biāo)準文檔流的元素層級要高，會將標(biāo)準文檔流的元素遮擋住。
浮動元素會向左浮動或向右浮動。浮動元素會遇到父元素的邊緣就停止了浮動。
浮動元素會遇到已經(jīng)有了浮動的元素，后者會浮動到前者之后就停止了浮動。
浮動元素浮動之后就脫離了父元素，并且父元素不再包裹浮動的元素。
行內(nèi)元素設(shè)置為浮動，就擁有了塊級元素的特點。

為什么要清除浮動呢？

因為浮動的元素會影響到下面元素，具體看實踐結(jié)果圖大家就明白了。
class屬性值為.box元素的子類元素沒有浮動前的效果實踐。

代碼塊

結(jié)果圖

CSS怎么實現(xiàn)元素浮動和清除浮動

class屬性值為.box元素的子元素左浮動之后影響到下面的元素排版布局實踐。

代碼塊

結(jié)果圖

CSS怎么實現(xiàn)元素浮動和清除浮動

現(xiàn)在大家應(yīng)該明白了為什么要清除浮動了，有浮動就必須清除浮動，因為上面的元素設(shè)置了浮動就會影響到下面元素排版布局。

清除浮動有3種方式

第一種方式

給浮動的元素父元素設(shè)置一個固定的高度，從視覺上看到浮動的元素在父元素包裹之內(nèi)。
我們給浮動元素的父元素設(shè)置一個固定600px像素的高度，一起來看看效果如何。

代碼塊

結(jié)果圖

CSS怎么實現(xiàn)元素浮動和清除浮動

這樣是解決了下面元素排版布局問題，但是筆者不推薦這么做，因為高度是由子元素的內(nèi)容撐起來的高度，而不是我們給的固定高度。

第二種方式

其實在CSS中也有清除浮動的屬性，清除浮動屬性名為clear。

clear屬性值說明表

屬性值	描述
left	清除左側(cè)浮動元素。
right	清除右側(cè)浮動元素。
both	清除左右側(cè)浮動元素。

要使用這個clear屬性必須創(chuàng)建一個新的div元素，創(chuàng)建新的div元素不能放置任何內(nèi)容，它只能做一個件事情，那就是清除浮動并且將這個新創(chuàng)建的div元素放在最后一個浮動元素的后面才會生效。
左右清除浮動的屬性值筆者在這里就不一一實踐了，一般我們就用both屬性值就可以了，左右清除浮動，干嘛還要計較它是左浮動或右浮動呢，直接清除左右浮動就ok了。
具體的看我們實踐的結(jié)果圖。

代碼塊

結(jié)果圖

CSS怎么實現(xiàn)元素浮動和清除浮動

注意：這才是我們真正想要的結(jié)果，并且從視覺上來看浮動的元素包裹在父元素之內(nèi)的效果。

第三種方式

使用屬性為overflow并且屬性值為hidden來清除浮動，必須將這個屬性設(shè)置在浮動元素的父元素身上。
給大家普及下屬性為overflow并且屬性值為hidden，它原意是用來將溢出的部分內(nèi)容進行隱藏，但是它還可以清除浮動。
筆者先將內(nèi)容溢出然后在隱藏溢出的內(nèi)容，那我們一起來看看唄。

代碼塊




    
    
    
    溢出內(nèi)容進行隱藏
    


    
        微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
        微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
        微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。

結(jié)果圖

CSS怎么實現(xiàn)元素浮動和清除浮動

下面筆者將溢出的內(nèi)容進行隱藏。

代碼塊




    
    
    
    溢出內(nèi)容進行隱藏
    


    
        微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
        微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
        微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。

結(jié)果圖

CSS怎么實現(xiàn)元素浮動和清除浮動

使用屬性為overflow并且屬性值為hidden來清除浮動。
清除浮動之前我們先看看結(jié)構(gòu)是如何的。

代碼塊




    
    
    
    清除浮動
    


    
        微笑是最初的信仰1
        微笑是最初的信仰2
        微笑是最初的信仰3
        微笑是最初的信仰4
        微笑是最初的信仰5
        微笑是最初的信仰6
        微笑是最初的信仰7
        微笑是最初的信仰8

結(jié)果圖

CSS怎么實現(xiàn)元素浮動和清除浮動

注意：在這里筆者還沒有給浮動元素清除浮動呢，大家可以明顯的看到ul標(biāo)簽高度為0。

清除浮動實踐

代碼塊




    
    
    
    清除浮動
    


    
        微笑是最初的信仰1
        微笑是最初的信仰2
        微笑是最初的信仰3
        微笑是最初的信仰4
        微笑是最初的信仰5
        微笑是最初的信仰6
        微笑是最初的信仰7
        微笑是最初的信仰8

結(jié)果圖

CSS怎么實現(xiàn)元素浮動和清除浮動

現(xiàn)在我們很清楚的看到ul標(biāo)簽高度為23px像素，為什么要使用：屬性為overflow并且屬性值為hidden來清除浮動，因為ul標(biāo)簽中只能使用li標(biāo)簽元素不能使用其它元素，所以屬性為overflow并且屬性值為hidden來清除浮動是好不過啦。

以上是“CSS怎么實現(xiàn)元素浮動和清除浮動”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱欄目：CSS怎么實現(xiàn)元素浮動和清除浮動-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://weahome.cn/article/dgcscg.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部

<small id="6cau4"></small>

<strike id="6cau4"></strike>

<small id="6cau4"></small>

<pre id="6cau4"><optgroup id="6cau4"></optgroup></pre>

<small id="6cau4"></small>

<small id="6cau4"></small>

<dfn id="6cau4"></dfn>