定义了浮动元素后margin-bottom失效的解决办法
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
雖然IE6慢慢的退出市場(chǎng)了，但是還是有必要了解一些兼容問題，讓自己的知識(shí)有一個(gè)更好的沉淀。margin-bottom的bug是容器div的?'zoom:1'?觸發(fā)了?hasLayout，其內(nèi)部浮動(dòng)子元素也參與到了容器的高度計(jì)算之中。
在?IE6?IE7?IE8(Q)中，容器div的?'zoom:1'?觸發(fā)了?hasLayout，其內(nèi)部浮動(dòng)子元素也參與到了容器的高度計(jì)算之中。但是浮動(dòng)子元素設(shè)置的?'margin-bottom'?消失；
在其他瀏覽器中，容器的?'overflow:hidden'?創(chuàng)建了新的?Block?Formatting?Context?，同樣，其內(nèi)部浮動(dòng)子元素也參與到了容器的高度計(jì)算之中。浮動(dòng)子元素的四個(gè)方向的?margin?均正常。
例子：第一個(gè)div子元素設(shè)置了底部的margin值，在清除浮動(dòng)之后無效
<!doctype?html> <html> <head> <meta?charset="UTF-8"> <title>浮動(dòng)元素的影響</title> <style> *{margin:?0;padding:?0;} .con-float-box{ width:?600px; border:?1px?solid?#f00; } .con-float-box?div{ float:?left; width:?198px; height:?98px; margin:?20px?0; border:?1px?solid?#00f; } .box-pos{ width:?600px; height:?100px; margin-top:?10px; border:?1px?solid?#000; background:?#ccf; } .clearfix:before,.clearfix:after?{ content:?"\200B"; display:?block; height:?0; overflow:?hidden; } .clearfix:after?{clear:?both;} </style> </head> <body> <div?class='con-float-box?clearfix'> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> <div?class='box-pos'>為第一個(gè)div設(shè)置了清除浮動(dòng)的類clearfix，進(jìn)行了相應(yīng)的處理，此時(shí)，在谷歌瀏覽器當(dāng)中正常，但是在IE6，依舊不正常，第7和第8個(gè)塊底部的margin沒有生效。</div> </body> </html>?
解決方案
為容器顯式地設(shè)置高度。若容器高度不定，則要避免在觸發(fā)了?hasLayout?的容器內(nèi)的浮動(dòng)子元素上設(shè)置?'margin-bottom'?特性，可以通過為容器設(shè)置?'padding-bottom'?達(dá)到相似的效果。
只要不同時(shí)觸發(fā)父元素hasLayout、子元素左浮動(dòng)、左浮動(dòng)子元素?fù)碛蟹橇愕?margin-bottom?值，這三個(gè)條件中任意一項(xiàng)，均可解決此問題。
以上就是今天E良師益友網(wǎng)對(duì)定義了浮動(dòng)元素后margin-bottom失效的解決辦法詳解了。
轉(zhuǎn)載于:https://my.oschina.net/zhouhang0907/blog/548455
總結(jié)
以上是生活随笔為你收集整理的定义了浮动元素后margin-bottom失效的解决办法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 通过Web.config实现301重定向
- 下一篇： 在 Cent OS 6.5 中安装桌面环