清除浮动的方法
2016-06-23 本文已影响0人
横三竖二
一、准备
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
ul {
border: dotted red 1px;
display: block;
}
li{
border: dotted blue 1px;
float: left;
list-style: none;
}
.content{
border: dotted green 1px;
}
.box{
border: dotted black 1px;
}
</style>
</head>
<body>
<div class="content">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li style="">asda</li>
</ul>
<div class="box">
<h1>阿菲是个小乖乖</h1>
</div>
</div>
</body>
</html>
方法1. clearfix(一)
定义
.clearfix{
overflow: auto;
height: 1%;
}
ul添加clearfix
方法2. clearfix(二)
.clearfix{
overflow: hidden;
zoom: 1;
}
方法3. clearfix(三) 推荐
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden
}
.clearfix{
height:1%;
}
