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

創(chuàng)新互聯(lián)公司是網(wǎng)站建設(shè)專家,致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營銷，專業(yè)領(lǐng)域包括成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、電商網(wǎng)站制作開發(fā)、小程序設(shè)計(jì)、微信營銷、系統(tǒng)平臺(tái)開發(fā)，與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開發(fā)公司不同，我們的整合解決方案結(jié)合了恒基網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營銷的理念，并將策略和執(zhí)行緊密結(jié)合，且不斷評(píng)估并優(yōu)化我們的方案，為客戶提供全方位的互聯(lián)網(wǎng)品牌整合方案！

塊元素在文檔流中默認(rèn)垂直排列，所以多個(gè)div從上至下依次排開

如果希望塊元素在頁面中水平排列，可以使用float來使元素浮動(dòng)，從而脫離文檔流,元素脫離文檔流以后，它下邊的元素會(huì)立即向上移動(dòng)

css浮動(dòng)的特性

1.浮動(dòng)的元素不會(huì)蓋住文字，文字會(huì)自動(dòng)環(huán)繞在浮動(dòng)元素的周圍

2.元素浮動(dòng)以后，會(huì)盡量向頁面的左上或這是右上漂浮,直到遇到父元素的邊框或者其他的浮動(dòng)元素

3.如果浮動(dòng)元素上邊是一個(gè)沒有浮動(dòng)的塊元素，則浮動(dòng)元素不會(huì)超過塊元素

4.浮動(dòng)的元素永遠(yuǎn)不會(huì)超過他上邊的兄弟元素,最多一邊擠

5.塊元素脫離文檔流以后,默認(rèn)的高度和寬度都丟失.高寬會(huì)被內(nèi)容撐開(不再是默認(rèn)的占父元素100%)(這是脫離文檔流的特點(diǎn),不僅僅是浮動(dòng)才會(huì)這樣)

6.內(nèi)聯(lián)元素脫離文檔流后,會(huì)變成塊元素(所有元素一旦脫離文檔流.全都會(huì)變成塊元素)

<style>
body{color:#FFFFFF;}

.box1{
width: 400px;height: 100px;

background-color:red;
float: left;    
}
.box2{
width: 400px;height: 100px;
background-color:Black;
float: left;    
}
.box3{
width: 100px;height: 100px;
background-color:Blue;
float: right;   
}
</style>

<div >
    <div class="box1">box1左浮動(dòng)</div>
    <div class="box2">box2左浮動(dòng)</div>
    <div class="box3">box3右浮動(dòng)(為什么不到右上角?)</div>
    <!--浮動(dòng)的元素永遠(yuǎn)不會(huì)超過他上邊的兄弟元素,最多一邊擠-->
</div>
web前端開發(fā)學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法
（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻，PDF）

浮動(dòng)的影響與清除浮動(dòng)

在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_的，也就是子元素多高，父元素就多高。

但是子元素浮動(dòng)后,因?yàn)槊撾x了文檔流,所以子元素?zé)o法撐起父元素的高度.導(dǎo)致父元素高度消失.后面的元素都將會(huì)向上移動(dòng).最終導(dǎo)致頁面布局混亂。

清除浮動(dòng)方法1(針對(duì)父子元素)：

給父元素指定一個(gè)高度直接寫死（不推薦）

清除浮動(dòng)方法2(針對(duì)父子元素)：

給父元素開啟BFC。

清除浮動(dòng)方法3:清除浮動(dòng)clear(針對(duì)兄弟元素)

clear可以用來清除其他浮動(dòng)元素對(duì)當(dāng)前元素的影響,僅僅是清除影響,清除浮動(dòng)后.元素會(huì)回到其他元素浮動(dòng)之前的位置

如果前面的元素是左浮動(dòng):clear:left

如果前面的元素是右浮動(dòng):clear:right

| 值 | 描述 |
| left | 在左側(cè)不允許浮動(dòng)元素。 |
| right | 在右側(cè)不允許浮動(dòng)元素。 |
| both | 在左右兩側(cè)均不允許浮動(dòng)元素。(清除對(duì)元素影響大的那個(gè)元素浮動(dòng)) |
| none | 默認(rèn)值。允許浮動(dòng)元素出現(xiàn)在兩側(cè)。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 clear 屬性的值。 |

清除浮動(dòng)導(dǎo)致高度塌陷問題(父子元素)：

可以直接在高度塌陷的父元素的最后，添加一個(gè)空白的div,并設(shè)置clear

但是此方法會(huì)添加冗余代碼.因此可使用css進(jìn)行添加偽元素:

.父元素:after{
content:"";
display:block;
clear:both;
}

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享文章：css浮動(dòng)的特性有哪些-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于：http://m.rwnh.cn/article14/djihge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、用戶體驗(yàn)、自適應(yīng)網(wǎng)站、域名注冊(cè)、網(wǎng)站制作、云服務(wù)器

廣告

聲明：本網(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)