<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.clearfix {
content: ".";
overflow: hidden;
background-color: green;
border: 3px solid rebeccapurple;
}
.clearfix2 {
background-color: green;
border: 3px solid rebeccapurple;
}
.clearfix3 {
background-color: green;
border: 3px solid rebeccapurple;
width: auto;
height: 200px;
}
.clearfix4:after {
content: ".";
/* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.clearfix4 {
background-color: green;
border: 3px solid rebeccapurple;
}
.clearfix5 {
background-color: green;
border: 3px solid rebeccapurple;
}
.clearfix5 {
overflow: auto;
height: 1%
}
.clearfix6 {
background-color: green;
border: 3px solid rebeccapurple;
}
.clearfix6 {
zoom: 1;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<!--对父级CSS选择器加overflow:hidden样式，
可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。-->
<div class="clearfix">
<div>
<div style="float:left; width:100px; height:100px; background-color:#f00"></div>
</div>
<div style="width:200px; height:200px; background-color:#00f; float:right"></div>
</div>
<br/>
<!--clear:both清除浮动-->
<div class="clearfix2">
<div>
<div style="float:left; width:100px; height:100px; background-color:#f00"></div>
</div>
<div style="width:200px; height:200px; background-color:#00f; float:right"></div>
<div class="clear"></div>
</div>
<br/>
<!--对父级设置适合CSS高度-->
<div class="clearfix3">
<div>
<div style="float:left; width:100px; height:100px; background-color:#f00"></div>
</div>
<div style="width:200px; height:200px; background-color:#00f; float:right"></div>
<div class="clear"></div>
</div>
<br/>
<!--这个clearfix的CSS使用了after这个伪对象，它将在应用clearfix的元素的结尾添加content中的内容。
在这里添加了一个句号"."，并且把它的display设置成block；高度设为0；clear设为both；visibility
设为隐藏。这样就达到了撑开容器的目的啦。-->
<div class="clearfix4">
<div>
<div style="float:left; width:100px; height:100px; background-color:#f00"></div>
</div>
<div style="width:200px; height:200px; background-color:#00f; float:right"></div>
<div class="clear"></div>
</div>
<div class="clearfix5">
<div>
<div style="float:left; width:100px; height:100px; background-color:#f00"></div>
</div>
<div style="width:200px; height:200px; background-color:#00f; float:right"></div>
<div class="clear"></div>
</div>
<div class="clearfix6">
<div>
<div style="float:left; width:100px; height:100px; background-color:#f00"></div>
</div>
<div style="width:200px; height:200px; background-color:#00f; float:right"></div>
<div class="clear"></div>
</div>
</body>
</html>
网友评论