<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.contend{
border: 1px solid black;
}
.box1,.box2,.box3{
width: 100px;
height: 100px;
}
.box1{
background-color: rgb(0,255,0);
float:left;
}
.box2{
background-color: rgb(255,0,0);
float:left;
}
.box3{
background-color: rgb(0,0,255);
float:left;
}
.clear{
clear:both;
}
.conter{
border: 1px solid black;
overflow: hidden;
zoom: 1; /* 设置让其兼容IE */
}
.box11,.box22,.box33{
width: 100px;
height: 100px;
}
.box11{
background-color: rgb(0,255,0);
float:left;
}
.box22{
background-color: rgb(255,0,0);
float:left;
}
.box33{
background-color: rgb(0,0,255);
float:left;
}
.fu{
border: 1px solid black;
}
.clearfix:after{
content: "";
height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix{
zoom: 1; /* 设置让其兼容IE */
}
.zi1,.zi2,.zi3{
width: 100px;
height: 100px;
}
.zi1{
background-color: rgb(0,255,0);
float:left;
}
.zi2{
background-color: rgb(255,0,0);
float:left;
}
.zi3{
background-color: rgb(0,0,255);
float:left;
}
</style>
</head>
<body>
<!-- 第一种 -->
<div class="contend">
<div class="box1">第一种清除浮动的方法</div>
<div class="box2">第一种清除浮动的方法</div>
<div class="box3">第一种清除浮动的方法</div>
<div class="clear"></div>
</div>
<hr/>
<!-- 第二种 -->
<div class="conter">
<div class="box11">第二种清除浮动的方法</div>
<div class="box22">第二种清除浮动的方法</div>
<div class="box33">第二种清除浮动的方法</div>
</div>
<hr/>
<!-- 第三种 -->
<div class="fu clearfix">
<div class="zi1">第三种清除浮动的方法</div>
<div class="zi2">第三种清除浮动的方法</div>
<div class="zi3">第三种清除浮动的方法</div>
</div>
</body>
</html>
清除浮动的三种方法(推荐第三种)
最新推荐文章于 2021-07-05 19:54:28 发布