e媒网络

一切皆可能 e媒网络 http://www.eMay.net
博客园 首页 新随笔 联系 订阅 管理
清除浮动的两种方法测试 
<!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: 20px;
    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: 20px;
    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>

 

posted on 2019-04-10 16:22  e媒网络技术团队  阅读(160)  评论(0)  编辑  收藏  举报