定义了浮动元素后margin-bottom失效的解决办法
2019獨角獸企業重金招聘Python工程師標準>>>
雖然IE6慢慢的退出市場了，但是還是有必要了解一些兼容問題，讓自己的知識有一個更好的沉淀。margin-bottom的bug是容器div的?'zoom:1'?觸發了?hasLayout，其內部浮動子元素也參與到了容器的高度計算之中。
在?IE6?IE7?IE8(Q)中，容器div的?'zoom:1'?觸發了?hasLayout，其內部浮動子元素也參與到了容器的高度計算之中。但是浮動子元素設置的?'margin-bottom'?消失；
在其他瀏覽器中，容器的?'overflow:hidden'?創建了新的?Block?Formatting?Context?，同樣，其內部浮動子元素也參與到了容器的高度計算之中。浮動子元素的四個方向的?margin?均正常。
例子：第一個div子元素設置了底部的margin值，在清除浮動之后無效
<!doctype?html> <html> <head> <meta?charset="UTF-8"> <title>浮動元素的影響</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'>為第一個div設置了清除浮動的類clearfix，進行了相應的處理，此時，在谷歌瀏覽器當中正常，但是在IE6，依舊不正常，第7和第8個塊底部的margin沒有生效。</div> </body> </html>?
解決方案
為容器顯式地設置高度。若容器高度不定，則要避免在觸發了?hasLayout?的容器內的浮動子元素上設置?'margin-bottom'?特性，可以通過為容器設置?'padding-bottom'?達到相似的效果。
只要不同時觸發父元素hasLayout、子元素左浮動、左浮動子元素擁有非零的?margin-bottom?值，這三個條件中任意一項，均可解決此問題。
以上就是今天E良師益友網對定義了浮動元素后margin-bottom失效的解決辦法詳解了。
轉載于:https://my.oschina.net/zhouhang0907/blog/548455
總結
以上是生活随笔為你收集整理的定义了浮动元素后margin-bottom失效的解决办法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 通过Web.config实现301重定向
- 下一篇： 在 Cent OS 6.5 中安装桌面环