正文

clearfix的清浮动的技巧

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0616

clearfix清浮动效果图

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.left,.right{
width: 200px;
height: 200px;
float: left;
}
.left{
background-color: brown;
}
.right{
background-color: cornflowerblue;
}
.header,.footer{
border: 10px solid red;
}
.header:after{
/*
利用伪元素:after清除浮动必备的条件,缺一不可
1.块级元素
2.clear:both
3.content:""
*/
display: block;/*确保元素是一个块级元素*/
clear: both;/*不允许左右两边有浮动对象*/
content: "";/*这是伪元素:before和:after天生自带的属性,如果不写,伪元素不起作用*/

/*写全的样式属性*/
height: 0;/*防止在低版本浏览器中height:1px的情况，我们用height:0去覆盖*/
font-size: 0;/*字体大小*/
overflow: hidden;/*溢出隐藏*/
visibility: hidden;/*让所有可见性的元素隐藏*/
}

/*
共有class名
利用伪元素after清浮动的固定代码，只要清浮动，我们在浮动元素的父元素上加一个cleafix即可；
*/

.clearfix:after{
display: block;
clear: both;
content: "";
height: 0;
font-size: 0;
overflow: hidden;
visibility: hidden;
}
/*
思考题
overflow:hidden和visibility: hidden;有什么区别呢?
*/
</style>
</head>
<body>
<div class="header">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>