CSS知识点：清楚浮动
开场白
我们平时工作中，很容易遇到浮动效果。一个DIV中嵌套多个DIV，左边显示一个DIV，右边显示一个DIV，外层DIV的高度随着内层内容的高度变化。这就是最基本的浮动效果。下图的百度搜索结果就是一个简单的例子。
什么是CSS清除浮动？
借用W3C的定义。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。（其实简单理解就是浮动的元素就是木板浮在水面上一样，和水平面不在一个平面上，因此两个平面的布局不会互相影响，但是水平面的岸边还是会限制木板的活动区域的。）
以下是一个简单的例子，trapper容器没有“包住”浮动的元素。
.trapper{
background-color: gray;
border: solid 1px black;
}
.left{
float: left;
height:200px;
width:200px;
border:solid 1px red;
}
.right {
float: right;
height:200px;
width:200px;
border:solid 1px green;
}
<div class="trapper">
<div class="left"></div>
<div class="right"></div>
</div>
清除浮动方法
方法一：带clear属性的空元素(简单，兼容性不错，但是增加了没用的html元素，如果浮动元素后边还有相邻的元素，可以给相邻的元素直接加上clear属性。)
在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。
.trapper{
background-color: gray;
border: solid 1px black;
}
.left{
float: left;
height:200px;
width:200px;
border:solid 1px red;
}
.right {
float: right;
height:200px;
width:200px;
border:solid 1px green;
}
<div class="trapper">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
方法二：使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。
在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
.trapper{
background-color: gray; border: solid 1px black;
overflow:hidden;
*zoom:1; } .left{ float: left;
height:200px;
width:200px;
border:solid 1px red; } .right { float: right;
height:200px;
width:200px;
border:solid 1px green; } <div class="trapper"> <div class="left"></div> <div class="right"></div> </div>
方法三：给浮动的元素的容器添加浮动（将容器和内部内容浮动到同一个平面上，这样影响了布局，整体浮动不推荐）
方法四：使用CSS的:after伪元素
结合 :after 伪元素和 IEhack ， IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
.trapper{
background-color: gray; border: solid 1px black;
overflow:hidden;
*zoom:1; } .left{ float: left;
height:200px;
width:200px;
border:solid 1px red; } .right { float: right;
height:200px;
width:200px;
border:solid 1px green; }
.clearfix {
/* 触发 hasLayout */
zoom: 1;
}
.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
<div class="trapper clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
通过CSS伪元素在容器的内部元素最后添加了一个看不见的点"."，并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。
推荐使用使用伪元素的方式解决元素浮动问题。
结束语
您有收获吗？
希望我没有浪费您的时间。
谢谢您的耐心阅读。
如有错误或者补充及时更正。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
