用 :after 方法清除浮動(注意:作用于浮動元素的父親)

先說原理:這種方法清除浮動是現(xiàn)在網(wǎng)上最拉風的一種清除浮動拂募,他就是利用:after和:before來在元素內(nèi)部插入兩個元素塊羽莺,從面達到清除浮動的效果弧蝇。其實現(xiàn)原理類似于clear:both方法欣喧,只是區(qū)別在于:clear在html插入一個div.clear標簽歼秽,而outer利用其偽類clear:after在元素內(nèi)部增加一個類似于div.clear的效果应役。下面來看看其具體的使用方法:

. box{ zoom:1;} ? /***for IE6/7***/

. box:after{ clear: both; content: '.' ; display:block; width: 0; height: 0; visibility: hidden;}

其中clear:both;指清除所有浮動;content: '.'; display:block;對于FF/chrome/opera/IE8不能缺少燥筷,其中content()可以取值也可以為空箩祥。visibility:hidden;的作用是允許瀏覽器渲染它,但是不顯示出來肆氓,這樣才能實現(xiàn)清楚浮動袍祖。

下一標簽直接清浮動兄弟標簽浮動時,在下一標簽的屬性中直接寫入清除clear:both;這樣就可以清除以上標簽的浮動而不用加入空標簽來清除浮動谢揪。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蕉陋,一起剝皮案震驚了整個濱河市捐凭,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌凳鬓,老刑警劉巖茁肠,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異缩举,居然都是意外死亡垦梆,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門仅孩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來托猩,“玉大人,你說我怎么就攤上這事辽慕【┬龋” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵鼻百,是天一觀的道長绞旅。 經(jīng)常有香客問我,道長温艇,這世上最難降的妖魔是什么因悲? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮勺爱,結(jié)果婚禮上晃琳,老公的妹妹穿的比我還像新娘。我一直安慰自己琐鲁,他們只是感情好卫旱,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著围段,像睡著了一般顾翼。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上奈泪,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天适贸,我揣著相機與錄音,去河邊找鬼涝桅。 笑死拜姿,一個胖子當著我的面吹牛扔傅,可吹牛的內(nèi)容都是我干的并思。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼扳埂,長吁一口氣:“原來是場噩夢啊……” “哼蛤肌!你這毒婦竟也來了壁却?” 一聲冷哼從身側(cè)響起批狱,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎儒洛,沒想到半個月后精耐,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體狼速,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡琅锻,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了向胡。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片恼蓬。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖僵芹,靈堂內(nèi)的尸體忽然破棺而出处硬,到底是詐尸還是另有隱情,我是刑警寧澤拇派,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布荷辕,位于F島的核電站,受9級特大地震影響件豌,放射性物質(zhì)發(fā)生泄漏疮方。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一茧彤、第九天 我趴在偏房一處隱蔽的房頂上張望骡显。 院中可真熱鬧,春花似錦曾掂、人聲如沸惫谤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽溜歪。三九已至,卻和暖如春许蓖,著一層夾襖步出監(jiān)牢的瞬間蝴猪,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工蛔糯, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留拯腮,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓蚁飒,卻偏偏與公主長得像动壤,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子淮逻,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案琼懊? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 13,761評論 1 92
  • 這篇文章極好,以至于讓我受益良多,就一字沒有改動的轉(zhuǎn)發(fā)過來一絲冰涼老師的文章 需要注意的是阁簸,display:tab...
    新晉小牛牛閱讀 1,051評論 0 2
  • 浮動,從誕生那天起哼丈,它就是個特別的屬性——既為網(wǎng)頁布局帶來新的方法启妹,卻又隨之產(chǎn)生一系列的問題。當然醉旦,隨著時間的推移...
    郝特么冷閱讀 844評論 0 6
  • 我們在日常開發(fā)布局中經(jīng)常會使用到流體布局,流體布局用到的一個最重要的屬性就是浮動匈棘,今天就來看看浮動的相關(guān)知識丧慈。 1...
    一木_qintb閱讀 1,106評論 0 2
  • 出去吃飯的時候舍友無聊然后開始算起了一筆賬。 “我們來臺灣交換一學期主卫,學費1萬6逃默,機票三千,加上吃的走的簇搅,可能要兩...
    S的隨便用賬號閱讀 865評論 2 49