用after清除浮动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>清除float(沉底)</title>
<meta charset="UTF-8">
<style>
.outer .inner{
width: 50px;
height:50px;
background-color: #ee5555;
border: 1px solid greenyellow;
}
.outer{
background-color: #45beff;
}
.left{
float: left;
}
.clearfix:after{
content: 'star';/*content必须要有,要不然就没标签了*/
display:block;
clear:both;
visibility:hidden;/*去掉star内容*/
height:0;/*去掉占用的位置*/
}


</style>
</head>
<body>
<div class="outer clearfix">
<div class="inner left"></div>
<div class="inner left"></div>
<div class="inner left"></div>
<div class="inner left"></div>
</div>



</body>
</html>

猜你喜欢

转载自www.cnblogs.com/startl/p/12317833.html
今日推荐