CSS的浮動(dòng)及清除浮動(dòng)的5種方法介紹
我要評(píng)論個(gè)人簡歷的制作
問題：
在盒子模型中嵌套幾個(gè)小盒子，在添加最后一個(gè)盒子的時(shí)候，更改顏色無變化。
解決辦法：
前面的盒子中用到了css的浮動(dòng)（float），當(dāng)注釋掉前面所用浮動(dòng)時(shí)，最后一個(gè)盒子可以顯示顏色，可見是浮動(dòng)的問題；前面的覆蓋掉了后面的塊，導(dǎo)致顏色無法更改；用clear：both可清除。
拓展：
浮動(dòng)是布局的時(shí)用到的一種技術(shù)，能夠方便我們進(jìn)行布局。
1、浮動(dòng)的設(shè)置：css屬性float：left/right/none 左浮動(dòng)/右浮動(dòng)/不浮動(dòng)（默認(rèn)）
2、浮動(dòng)的原理：使當(dāng)前元素脫離普通流，相當(dāng)于浮動(dòng)起來一樣，浮動(dòng)的框可以左右移動(dòng)，直至它的外邊緣遇到包含框或者另一個(gè)浮動(dòng)框的邊緣
3、浮動(dòng)的影響：對(duì)附近的元素布局造成改變，使得布局混亂
因?yàn)楦?dòng)元素脫離了普通流，會(huì)出現(xiàn)一種高度坍塌的現(xiàn)象：原來的父容器高度是內(nèi)部元素?fù)伍_的，但是當(dāng)內(nèi)部元素浮動(dòng)后，脫離普通流浮動(dòng)起來，那父容器的高度就坍塌，變?yōu)楦叨?px。
清除浮動(dòng)的5種方法
1、父級(jí)div定義overflow:hidden
2、結(jié)尾處加空div標(biāo)簽clear:both
3、父級(jí)div定義height
4、父級(jí)div定義overflow:auto
5、父級(jí)div定義偽類:after和zoom
以上就是CSS的浮動(dòng)及清除浮動(dòng)的5種方法介紹的詳細(xì)內(nèi)容，更多關(guān)于CSS浮動(dòng)及清除的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了CSS3 清除浮動(dòng)的方法示例的相關(guān)資料,通過本文，讓大家可以明白清除浮動(dòng)的原理和幾種方法，最后得出一種本文認(rèn)為最好用的方法,感興趣的小伙伴們可以參考2018-06-01無需JS和jQuery代碼實(shí)現(xiàn)CSS3鼠標(biāo)浮動(dòng)放大圖片
本文給大家分享一段css3代碼實(shí)現(xiàn)鼠標(biāo)浮動(dòng)放大圖片效果，代碼中無需js和jquery代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友參考下吧2016-11-21
使用CSS3實(shí)現(xiàn)文字帶輪廓邊框特效的方法
這篇文章給大家介紹了使用CSS3實(shí)現(xiàn)文字帶輪廓邊框特效的方法，文中有詳細(xì)的代碼示例供大家參考，對(duì)大家的學(xué)習(xí)或工作有一定的幫助，感興趣的小伙伴可以自己試試2023-10-26
純CSS實(shí)現(xiàn)開關(guān)按鈕切換效果簡潔易用
這篇文章主要為大家介紹了純CSS實(shí)現(xiàn)開關(guān)按鈕切換效果簡潔易用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-11
CSS3模擬小倉鼠一直奔跑的動(dòng)畫特效(實(shí)例代碼)
最近在麗澤橋的花鳥蟲魚市場(chǎng)看見小倉鼠一直在奔跑，覺得它好累啊，但是卻又樂此不疲的在跑著，就像我們這些打工族一樣,之前見過有人把手機(jī)放在小倉鼠的滾輪上記步數(shù)，也是2023-09-15CSS3屬性中的text-overflow:ellipsis詳解
這篇文章主要介紹了CSS3屬性中的text-overflow:ellipsis詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-08-07css動(dòng)畫模擬太陽地球月球運(yùn)動(dòng)軌跡示例
這篇文章主要介紹了css動(dòng)畫模擬太陽地球月球運(yùn)動(dòng)軌跡示例,調(diào)整旋轉(zhuǎn)中心有點(diǎn)困難，大家可以多嘗試，先實(shí)現(xiàn)動(dòng)畫效果，看動(dòng)畫效果慢慢調(diào)整中心,需要的朋友可以參考下2023-05-10
CSS實(shí)現(xiàn)奔跑的北極熊動(dòng)畫
這篇文章主要介紹了CSS實(shí)現(xiàn)奔跑的北極熊動(dòng)畫,css動(dòng)畫還是很有趣的，本文就用動(dòng)畫實(shí)現(xiàn)一個(gè)奔跑的北極熊,感興趣的小伙伴一起來看看吧,需要的朋友可以參考下2023-05-10
本文主要介紹了CSS3實(shí)現(xiàn)雙圓角Tab菜單，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-18
隨著前端技術(shù)的不斷發(fā)展與進(jìn)步，界面交互的樣式要求和美感也越來越高，很多網(wǎng)頁的交互都加上了css3動(dòng)畫,這里作者給大家分享一個(gè)前端開發(fā)必掌握的一個(gè)CSS3波浪效果2023-05-08
