1.给父元素加height
2.给父元素加浮动、绝对定位、固定定位
3.给父级元素加display:inline-block
4.给浮动元素下加<div class=”clear” ></div>
.clear{clear:both;height:0;overflow:hidden}
5.给浮动元素下加<br clear=”all”/>
这个不符合W3C的标准,样式,结构,行为分离。
6.给浮动元素的父级元素加
.clear{zoom:1;}触发IE7中的haslayout属性
.clear:after{content:””;display:block;clear:both}
在IE7以下,不支持after伪类,只支持a元素的四个伪类
haslayout:
IE7的兼容版本及以下的版本的渲染引擎的组成部分,haslayout在IE8的标准模式下已经废弃.
haslayout根据元素内容的大小或父级元素的大小来重新计算元素的宽高
以下属性和值将给定一个元素布局:
position:absolute float:left/right display:inline-block
width: height: zoom:(除normal外)
7.给浮动元素的父级元素加overflow:hidden/auto不要用scroll,因为会出现滚动条
(1)若父级元素有height,并且小于内容的height,则会隐藏或加滚动条
(2)若父级元素没有height,则会被撑开,所以清除浮动的时候,父级元素不加height。
问题:overflow在IE6下不能够包住浮动元素(即没有将元素提升层级的功能),因此结合zooom;1使用。