先說原理:這種方法清除浮動是現(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;這樣就可以清除以上標簽的浮動而不用加入空標簽來清除浮動谢揪。