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