欢迎访问我的的博客,网站主要用于记录学习WEB语言|CMS建站|SEO优化及日常工作常见问题总结!
您的位置:主页 > HTML/CSS >

clearfix的清浮动的技巧

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>
上一篇标题:如何让元素消失在我们的视野中(面试题)
下一篇标题:清浮动的方法

相关文章

 

文章-clearfix的清浮动的技巧发布日期:2021-04-01 17:21作者:admin
如需转载,请注明文章出处和来源网址:https://www.dhnblog.com/htmlcss/256.html