清除浮動clear:both

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

(1)、父級div定義 height
原理:父級div手動定義height俯萎,就解決了父級div無法自動獲取到高度的問題。
優(yōu)點:簡單运杭、代碼少夫啊、容易掌握
缺點:只適合高度固定的布局,要給出精確的高度辆憔,如果高度和父級div不一樣時撇眯,會產(chǎn)生問題
建議:不推薦使用,只建議高度固定的布局時使用

(2)虱咧、結(jié)尾處加空div標簽 clear:both
原理:添加一個空div熊榛,利用css提高的clear:both清除浮動,讓父級div能自動獲取到高度
優(yōu)點:簡單腕巡、代碼少玄坦、瀏覽器支持好、不容易出現(xiàn)怪問題
缺點:不少初學者不理解原理;如果頁面浮動布局多煎楣,就要增加很多空div豺总,讓人感覺很不好
建議:不推薦使用,但此方法是以前主要使用的一種清除浮動方法

(3)择懂、父級div定義 偽類:after 和 zoom
原理:IE8以上和非IE瀏覽器才支持:after喻喳,原理和方法2有點類似,zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動問題
優(yōu)點:瀏覽器支持好休蟹、不容易出現(xiàn)怪問題(目前:大型網(wǎng)站都有使用沸枯,如:騰迅日矫,網(wǎng)易赂弓,新浪等等)
缺點:代碼多、不少初學者不理解原理哪轿,要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持盈魁。
建議:推薦使用,建議定義公共類窃诉,以減少CSS代碼杨耙。

(4)、父級div定義 overflow:hidden
原理:必須定義width或zoom:1飘痛,同時不能定義height珊膜,使用overflow:hidden時,瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點:簡單宣脉、代碼少车柠、瀏覽器支持好
缺點:不能和position配合使用,因為超出的尺寸的會被隱藏塑猖。
建議:只推薦沒有使用position或?qū)verflow:hidden理解比較深的朋友使用竹祷。

(5)、父級div定義 overflow:auto
原理:必須定義width或zoom:1羊苟,同時不能定義height塑陵,使用overflow:auto時,瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點:簡單蜡励、代碼少令花、瀏覽器支持好
缺點:內(nèi)部寬高超過父級div時,會出現(xiàn)滾動條凉倚。
建議:不推薦使用彭则,如果你需要出現(xiàn)滾動條或者確保你的代碼不會出現(xiàn)滾動條就使用吧。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末占遥,一起剝皮案震驚了整個濱河市俯抖,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌瓦胎,老刑警劉巖芬萍,帶你破解...
    沈念sama閱讀 218,607評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件尤揣,死亡現(xiàn)場離奇詭異,居然都是意外死亡柬祠,警方通過查閱死者的電腦和手機北戏,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來漫蛔,“玉大人嗜愈,你說我怎么就攤上這事∶Ч辏” “怎么了蠕嫁?”我有些...
    開封第一講書人閱讀 164,960評論 0 355
  • 文/不壞的土叔 我叫張陵,是天一觀的道長毯盈。 經(jīng)常有香客問我剃毒,道長,這世上最難降的妖魔是什么搂赋? 我笑而不...
    開封第一講書人閱讀 58,750評論 1 294
  • 正文 為了忘掉前任赘阀,我火速辦了婚禮,結(jié)果婚禮上脑奠,老公的妹妹穿的比我還像新娘基公。我一直安慰自己,他們只是感情好宋欺,可當我...
    茶點故事閱讀 67,764評論 6 392
  • 文/花漫 我一把揭開白布轰豆。 她就那樣靜靜地躺著,像睡著了一般迄靠。 火紅的嫁衣襯著肌膚如雪秒咨。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,604評論 1 305
  • 那天掌挚,我揣著相機與錄音雨席,去河邊找鬼。 笑死吠式,一個胖子當著我的面吹牛陡厘,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播特占,決...
    沈念sama閱讀 40,347評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼糙置,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了是目?” 一聲冷哼從身側(cè)響起谤饭,我...
    開封第一講書人閱讀 39,253評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后揉抵,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體亡容,經(jīng)...
    沈念sama閱讀 45,702評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,893評論 3 336
  • 正文 我和宋清朗相戀三年冤今,在試婚紗的時候發(fā)現(xiàn)自己被綠了闺兢。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,015評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡戏罢,死狀恐怖屋谭,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情龟糕,我是刑警寧澤桐磁,帶...
    沈念sama閱讀 35,734評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站翩蘸,受9級特大地震影響所意,放射性物質(zhì)發(fā)生泄漏淮逊。R本人自食惡果不足惜催首,卻給世界環(huán)境...
    茶點故事閱讀 41,352評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望泄鹏。 院中可真熱鬧郎任,春花似錦、人聲如沸备籽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,934評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽车猬。三九已至霉猛,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間珠闰,已是汗流浹背惜浅。 一陣腳步聲響...
    開封第一講書人閱讀 33,052評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留伏嗜,地道東北人坛悉。 一個月前我還...
    沈念sama閱讀 48,216評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像承绸,于是被迫代替她去往敵國和親裸影。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,969評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案军熏? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,754評論 1 92
  • 浮動的定義: 浮動元素脫離文檔流轩猩,按照指定方向移動,遇到父級邊界或者相鄰的浮動元素停了下來 浮動的特征: 浮動元素...
    機智小鐺鐺i閱讀 649評論 0 0
  • 我們在日常開發(fā)布局中經(jīng)常會使用到流體布局浊猾,流體布局用到的一個最重要的屬性就是浮動抖甘,今天就來看看浮動的相關知識。 1...
    一木_qintb閱讀 1,101評論 0 2
  • 前段時間用到了這些東西,學習順便整理在了一起偷办,清楚浮動幾種方法沒有試艰额,有時間再深入學習一下。 **********...
    Creator93閱讀 1,027評論 0 11
  • 清除浮動原因 前端布局用的最多的是float:脫離文檔流椒涯,浮動起來柄沮。浮動的框可以左右移動,直到遇到另一個浮動框或者...
    寫詩的猿猿閱讀 597評論 0 2