清除浮动

时间 2019-11-09

标签清除浮动繁體版

原文原文链接

在html布局中会用到浮动，可是使用不当会使页面达不到想要的效果。先来看一个由浮动形成bug的例子：css

html代码：html

<body>
<div class="float_box">
     <div class="float_left">左浮动元素</div>
     <div class="float_right">右浮动元素</div>
</div>
<div class="no_float">测试由于浮动致使该容器所处的位置</div>
</body>

css代码：chrome

<style type="text/css">
.float_left {
    float:left; /* 将元素左浮动 */
    width:200px;
    height:100px; /* 设置该元素的宽度和高度属性 */
    border:2px solid #FF0000;
    color:white;
}
.float_right {
    float:right; /* 将元素右浮动 */
    width:200px;
    height:100px; /* 设置该元素的宽度和高度属性 */
    border:2px solid #0000FF;
    color:white;
}
.float_box {
    background-color:#AAAAAA;
} /* 包含浮动元素的容器 */
.no_float {
    color:#FFFFFF;
    background-color:#000000;
} /* 因浮动元素而影响到的内容 */
</style>

获得的效果：浏览器

从效果图能够看到不只 class为no_float的div飘到了页面最上面，就连class为float_box的div的背景颜色也没法正常显示了。为了消除浮动带来的问题，须要利用‘清除浮动’技术来解决。布局

1.利用br标签中的clear属性清除浮动测试

<body>
<div class="float_box">
     <div class="float_left">左浮动元素</div>
     <div class="float_right">右浮动元素</div>
     <br clear="all">
</div>
<div class="no_float">测试由于浮动致使该容器所处的位置</div>
</body>

注：br的位置，是在包含有浮动元素的div内部。此外在FF浏览器看到类名为float_box的div标签已经有了背景，可是IE浏览器（IE7及如下）还不能正常显示背景色,这是IE浏览器中的haslayout问题形成的。为了纠正IE浏览器的兼容问题，须要对css中的.float_box进行修改spa

<style>
.float_box {
    background-color:#AAAAAA;
    zoom:1; /* 修正IE浏览器中haslayout的问题 */
} /* 包含浮动元素的容器 */
</style>

此时获得的结果是：code

2.利用css样式中的clear属性清除浮动（存在兼容问题）htm

能够利用添加行间样式，来清除浮动，这也我经常使用的方法。代码以下：blog

<style type="text/css">
.float_left {
    float:left; /* 将元素左浮动 */
    width:200px;
    height:100px; /* 设置该元素的宽度和高度属性 */
    border:2px solid #FF0000;
}
.float_right {
    float:right; /* 将元素右浮动 */
    width:200px;
    height:100px; /* 设置该元素的宽度和高度属性 */
    border:2px solid #0000FF;
}
.float_box {
    background-color:#AAAAAA;zoom:1; /* 修正IE浏览器中haslayout的问题 */
} /* 包含浮动元素的容器 */
.no_float { clear:both;/* 清除相邻的浮动效果 */
    color:#FFFFFF;
    background-color:#000000;
} /* 因浮动元素而印象到的内容 */
</style>

<body>
<div class="float_box">
    <div class="float_left">左浮动元素</div>
    <div class="float_right">右浮动元素</div>
</div>
<div class="no_float">测试由于浮动致使该容器所处的位置</div>
</body>

这种写法减小了一个无心义的空标签，而且达到了清除浮动的效果：

FF浏览器，chrome浏览器，IE8及以上浏览器：

IE7及如下元素：

注：在IE7及其如下版本的浏览器中经过zoom结合clear属性将浮动元素属性清除，而且让浮动元素的父级自适应高度，但此时对于FF浏览器而言只能清除浮动，没法自适应高度。zoom属性是IE浏览器私有的属性。不过有时咱们不会给浮动元素的父级添加背景，此时可使用这种方法。

3.利用css样式中的overflow属性清除浮动

代码以下：

<style type="text/css">
.float_left {
    float:left; /* 将元素左浮动 */
    width:200px;
    height:100px; /* 设置该元素的宽度和高度属性 */
    border:2px solid #FF0000;
}
.float_right {
    float:right; /* 将元素右浮动 */
    width:200px;
    height:100px; /* 设置该元素的宽度和高度属性 */
    border:2px solid #0000FF;
}
.float_box {overflow:hidden; /* 清除元素自身的由于浮动致使的浏览器解析问题 */
    background-color:#AAAAAA;zoom:1;
} /* 包含浮动元素的容器 */
.no_float {
    color:#FFFFFF;
    background-color:#000000;
} /* 因浮动元素而印象到的内容 */
</style>

<body>
<div class="float_box">
    <div class="float_left">左浮动元素</div>
    <div class="float_right">右浮动元素</div>
</div>
<div class="no_float">测试由于浮动致使该容器所处的位置</div>
</body>

注:这种方式比较简单，不过一样存在一些问题，例如当类名为float_box的div中有内容超出div后会被隐藏掉。

4.利用伪类：after后续控制的高度为零的伪类层清除浮动

虽然IE7及其如下浏览器不支持伪类层的效果，可是咱们仍是能够利用在偏向标准的浏览器中支持伪类层的效果解决浮动产生的问题，清除浮动的条件之一是必须在浮动元素以后，所以咱们使用:after伪类就能够了。并且在清除浮动的同时要将伪类层中的内容清空，并将高度和行高等元素设置为0，避免由于引用了：after伪类而生成的伪类层出现其余的内容。+

<style type="text/css">
.float_left {
    float:left; /* 将元素左浮动 */
    width:200px;
    height:100px; /* 设置该元素的宽度和高度属性 */
    border:2px solid #FF0000;
}
.float_right {
    float:right; /* 将元素右浮动 */
    width:200px;
    height:100px; /* 设置该元素的宽度和高度属性 */
    border:2px solid #0000FF;
}
.float_box {
    background-color:#AAAAAA;
    zoom:1; /* 针对IE浏览器产生haslayout效果清除浮动 */
} /* 包含浮动元素的容器 */
.no_float {
    color:#FFFFFF;
    background-color:#000000;
} /* 因浮动元素而印象到的内容 */
.clearFix:after {
    clear:both; /* 清除伪类层以上的浮动 */
    display:block;
    visibility:hidden; /* 设置伪类层内容为块元素且可见 */
    height:0;
    line-height:0; /* 设置伪类层中的高度和行高为0 */
    content:""; /* 将伪类层中的内容清空 */
} /* 利用:after伪类层清除浮动 */
.clearFix{
    zoom: 1;/*针对IE浏览器产生haslayout效果清除浮动*/
}
</style>

<body>
<div class="float_box clearFix">
    <div class="float_left">左浮动元素</div>
    <div class="float_right">右浮动元素</div>
</div>
<div class="no_float ">测试由于浮动致使该容器所处的位置</div>
</body>

注：利用伪类清除浮动的时候咱们给浮动元素的父元素又添加了一个类名，利用这个新类名的伪类来清除浮动。这样作的目的是由于，若是忽然有需求变动，原来的浮动元素再也不要求浮动，那么批量修改的话，只须要去掉clearFix这个类名就能够了。