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>

查看全文

相关阅读:
计算机病毒
 wordpress搬家教程
 javascript的DOM学习之选项卡制作
 javascript的DOM学习上
 [转]jQuery 引用地址{包括jquery和google提供的地址}, 节省你不必要的流量
 CSS3属性之：transition
CSS3属性之：animastion
css3学习系列之box-shadow(1)
使ie678支持css3伪类选择器的插件
 个人网站名称填写注意事项

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