行易软件技术团队

少谈技术,多谈应用

博客园 首页 新随笔 联系 订阅 管理
  51 Posts :: 2 Stories :: 1 Comments :: 0 Trackbacks
<!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 行易软件技术团队 阅读(...) 评论(...) 编辑 收藏