清除浮动 : 实现父元素能被浮动元素撑开
(1)添加<div style="clear:both;"></div>
(2) css after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack(zoom:1) ,可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout
zoom:1兼容IE6、IE7、IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:
触发IE浏览器的haslayout
解决ie下的浮动,margin重叠等一些问题。
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>*{margin: 0;padding: 0;}.test{zoom: 1;}/*ie兼容*/.test:after{ content: "564654";display:block;height: 0;clear: both;visibility: hidden;}.before-test{zoom: 1;}.before-test:before{ content: "564654";display:block;height: 0;clear: both;visibility: hidden;}</style></head><body><div class="test" style="border:1px solid red;"><p style="float: left;height: 100px;border: 1px solid blue;font-size: 14px;">黄金进口的水果科技的反馈结果合法</p><p style="float: left;height: 80px;border: 1px solid gray;">xdshgfhgh</p><!--<div style="clear: both;"></div>--><p class="before-test">sdgfdgfhg</p><p>sdgsfhghgfj</p></div></body></html>