小編給大家分享一下css怎樣讓盒子浮動(dòng),相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
css讓盒子浮動(dòng)的方法:可以利用float屬性來(lái)實(shí)現(xiàn),如【float: left;】。float屬性可以讓多個(gè)盒子水平排列成一行、居左或居右,盒子的寬度不再伸展,而是根據(jù)盒子里面的內(nèi)容的寬度來(lái)決定。
盒子的浮動(dòng)
在標(biāo)準(zhǔn)流中,一個(gè)塊級(jí)元素在水平方向會(huì)自動(dòng)伸展,知道包含它的元素的邊接;而在豎直方向與相鄰元素依次排列,不能并排。
(學(xué)習(xí)視頻推薦:java視頻教程)
CSS中float屬性,默認(rèn)為none。將float屬性的值設(shè)置為left或right,元素就會(huì)向其父元素的左側(cè)或右側(cè)靠緊。同時(shí)默認(rèn)情況下,盒子的寬度不再伸展,而是根據(jù)盒子里面的內(nèi)容的寬度來(lái)決定。
float: left;
可以使用clear來(lái)清除浮動(dòng):
clear: left | right | both;
浮動(dòng) (float)
作用:讓多個(gè)盒子水平排列成一行、居左居右
語(yǔ)法:選擇器 { float: 屬性值; }
left:元素向左浮動(dòng) right:元素向右浮動(dòng)
特點(diǎn):
會(huì)浮在標(biāo)準(zhǔn)流的上層
顯示不會(huì)占標(biāo)準(zhǔn)流盒子的位置
會(huì)轉(zhuǎn)換為類似行內(nèi)塊的元素,但元素之間沒(méi)有間隙
以上是css怎樣讓盒子浮動(dòng)的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
當(dāng)前題目:css怎樣讓盒子浮動(dòng)-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址:http://aaarwkj.com/article0/pjpio.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供靜態(tài)網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站排名、網(wǎng)站設(shè)計(jì)、用戶體驗(yàn)、云服務(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í)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容