您的位置：首页 > 其它

关于清除浮动

2015-06-01 22:31 197 查看
一，为什么要清除浮动

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>clearfix</title>
<style>
div {
border-radius: 4px;
margin: 5px;
border: 1px solid #0084c7;
}
.div1 {
}
.div2 {
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</bod
</html>


由于div2设置了float:left使其脱离文档流，没有形成div1包裹div2的效果

二 如何清除浮动

1.解决这个bug的方法有很多，比较简单的做法如下代码，

<div class="div1">
<div class="div2"></div>
<div style="clear: both;"></div>
</div>


插入一个"空白"div，设置起clear：both清除浮动，clear属性的原理是为元素添加足够多的外边距，使其垂直下降到 浮动框的下面。但是这中做法的缺点就是添加了无用的标签，使html不能符合寓意规范。

2.当前流行的一个做法是利用伪类：before和：after，代码如下，

.clearfix {
zoom: 1;
}

.clearfix:after, .clearfix:before {
content: "";
display: block;
clear: both;
}
<div class="div1 clearfix">
<div class="div2"></div>
</div>


添加消除浮动的类.clearfix后能正常显示div。注，zoom：1是兼容IE7。

3.还有一种方法是给外层父级div设置属性overflow：hidden。

.div1 {
/*background-color: #398439;*/
width: 300px;
overflow: hidden;
}

.div2 {
width: 100px;
height: 100px;
/*background-color: #003366;*/
float: left;
clear: left;
}


三，关于clear的另一个用途：实现垂直布局

要实现如图所示的布局，左侧的2个div浮动到父级div左侧



可以利用左侧第二个div的clear：left来实现，这样，内部div和文字就是同意级别，而不用将左侧的2个div包裹起来。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航