zoukankan html css js c++ java

清除浮动的两种方法测试

<!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>

查看全文

相关阅读:
证券公司业务部门深度全解
 转：ORM框架
 深入理解Java：注解（Annotation）基本概念
 Java与.net的区别delegate和event
XML的四种解析器原理及性能比较
 转: LRU缓存介绍与实现 (Java)
jquery -- checkbox选中无选中状态
 css -- 背景图片自适应屏幕大小
 javascript -- addEventListener()和removeEventListener
html5 -- audio标签

原文地址：https://www.cnblogs.com/exesoft/p/10684219.html