您的位置：首页 > 其它

清除浮动几种方法个人总结

2018-03-13 14:21 253 查看

1，为父元素添加高度：

<div>
<div class="float_left">左 height:200px</div>
<div class="float_right">右 height:200px</div>
</div>

如上简写，只需给父元素设置height：200px即可

2，在最后添加一个清除浮动的div，但这个方法多写了一个标签，不推荐使用：

<div>
<div class="float_left">左 height:200px</div>
<div class="float_right">右 height:200px</div>
<div class="clear:both"></div>
</div>

3，给父元素加over-flow:hidden

<div>
<div class="float_left">左 height:200px</div>
<div class="float_right">右 height:200px</div>0
</div>

给父元素加over-flowLhidden即可

4，伪类元素：网易搜狐常用

但是为了兼容IE6，IE7 要加上.clearfix{zoom:1}
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;

}

<div class="clearfix">
<div class="float_left">左 height:200px</div>
<div class="float_right">右 height:200px</div>0
</div>

5，bootstrap框架封装好的清楚浮动的样式，除非用到了这个框架，不然以上四种就够用了

<div class="clearfix">
<div class="float_left">左 height:200px</div>
<div class="float_right">右 height:200px</div>0
</div>

应用此框架只需在父元素加上class=”clearfix”即可，什么样式也不用写。

6、双伪元素小米，淘宝常用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.father{
width: 600px;
height: auto;
border:1px solid red;
}
.child1,.child2{
background: pink;
width: 250px;
height: 250px;
float: left;
}
.clearfix:before,.clearfix:after{  /*真正意义上的闭合浮动*/
display: table;
content: "";
}
.clearfix:after{
clear:both;
}
.clearfix{ //IE6
zoom:1;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="child1">哥哥</div>
<div class="child2">妹妹</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 清除浮动几种方法个人总结

相关文章推荐

新的分享

章节导航