CSS: clear 清除浮动 解决网页中的“塌陷”问题
2017-12-13 本文已影响28人
NiceBlueChai
什么是塌陷
如果父级元素只包含浮动元素,那么在未设置高度的情况下,父级元素的高度塌陷为0;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#wrap{border: black 5px solid;text-align: center;}
.child{
height:300px ;
width:420px;
float: left;
}
#child1{background-color: red;}
#child2{background-color:green ;}
#child3{background-color: blueviolet;}
</style>
<body>
<div id="wrap">
<div id="child1" class="child"></div>
<div id="child2" class="child"></div>
<div id="child3" class="child"></div>
</div>
</body>
</html>
可以看到在父级元素的高度塌陷为0,只剩下了黑色边框.
解决网页"塌陷"
1.创建一个用来清除浮动的css样式(.clearfix)
2.针对包裹的全是浮动元素的父级容器使用(.clearfix)
.clearfix{zoom:1;}/*zoom属性：IE浏览器专用的属性，为了兼容老版本的IE浏览器使用*/
.clearfix:after{ /*:after 伪对象选择符 --在这个对象被浏览器渲染之后添加一些内容*/
content: ".";/*content属性 : 添加的内容写在这个属性中,与伪对象同时出现 必须有该属性*/
display: block;/*将添加的内容转换为块状元素显示*/
visibility: hidden;/*visibility:可视化属性,控制元素是否可见,始终保留元素的物理空间*/
height: 0;/*将添加的内容高度设为0,消除占位*/
clear: both;/*将添加进的对象作为清除浮动的对象,实现外围容器中有内容存在,因此可以自动判断高度*/
}
