清除浮动的两种方法测试

佚名 6年前 (2019-04-10) 随笔 840人围观抢沙发百度已收录

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Clear Test A</title>
<style type="text/css">
.box {
    background: #000;
    border: 1px solid #F00;
    padding: 10px;
}
.box_left, .box_right {
    border: 1px solid #FFF;
    background: #999;
    width: 200px;
    height: 150px;
}
.box_left {
    float: left;
}
.box_right {
    float: right;
}
.clear {
    clear: both;
    height: 14px;
    background-color: #F00;
}
</style>
</head>
<body>
<div class="box">
  <div>
    <div class="box_left">float left盒子</div>
    <div class="box_right">float right盒子</div>
    <div class="clear"></div>
  </div>
  <div>
    <div class="box_left">float left盒子</div>
    <div class="box_right">float right盒子</div>
    <div class="clear"></div>
  </div>
</div>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Clear Test B</title>
<style type="text/css">
.box {
    background: #000;
    border: 1px solid #F00;
    padding: 10px;    
}
.box:after{
    content: '';
    color:red;
    display: block; 
    clear: both;
    height: 14px;
    background-color: #F00;
}
.box_left, .box_right {
    border: 1px solid #FFF;
    background: #999;
    width: 200px;
    height: 150px;
}
.box_left {
    float: left;
}
.box_right {
    float: right;
}
</style>
</head>
<body>
<div>
  <div class="box">
    <div class="box_left">float left盒子</div>
    <div class="box_right">float right盒子</div>
  </div>
  <div class="box">
    <div class="box_left">float left盒子</div>
    <div class="box_right">float right盒子</div> 
  </div>
</div>
</body>
</html>