清除浮动(父不随子层高度)的解决方法

wlsy — Tue, 20 Jan 2009 20:43:04 +0000

用float属性不可避免在非ie浏览器下回出现浮动问题，具体症状表现为：心跳发热，脸部通红，便秘，子层不继承父层的高度，照成高度不统一现象（现在的小屁孩真调皮）。copy个现成例子看现象：

CSS代码：

div.container {
    border: 1px solid #000000;
}
div.left {
    width: 45%;
    float: left;
    background-color: #6374AB;
    color: #ffffff;
}
div.right {
    width: 45%;
    float: right;
    background-color: #6374AB;
    color: #ffffff;
}

html代码：

<div class="container">
    <div class="left">
        <p>The left column.p>
        <p>The left column.p>
        <p>The left column.p>
        <p>The left column.p>
    div>
    <div class="right">
        <p>The right column.p>
        <p>The right column.p>
        <p>The right column.p>
    div>
div>

看到了吧，两个任性的小屁孩。父层背景为黑色，子层背景为蓝色，在ie下父层的黑色背景应该囊括子层，而在非ie下却会出现一个黑线，简单的讲就是高度为0，应该来说这是浏览器的一个bug。解决的方法很多，除了加强对孩子的开导和教育之外，比较常用有clear:both;overflow:hide;等。之前我一直都在父层上加个overflow：hide；属性，看起来挺好用也挺简单，不听经高人说：

overflow: hidden用来布局容易出问题，一是用 JavaScript Popup 出来的层很可能显示不全（致命伤）；二是在某些情况下会造成双击空白处全选（没总结出规律，偶尔会出现）。此外，某些时候还会造成性能问题。

为了避免篇幅过长，直接说重点。目前来说最好的使用伪对象来解决。方法为在父层加上这些属性：

.clearfix:after {
    content: "�020";/*放一个空白字符,借鉴自Adobe首页*/
    display: block;
    height: 0;
    clear: both;
}
.clearfix {
    zoom: 1;/*这个主要针对ie系列浏览器*/
}

把这些属性在加到上面例子的css中,然后再父层调用。看效果

看到了吧小屁孩听话了。

wlsy » 浮动

清除浮动(父不随子层高度)的解决方法