<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>清除浮动clear-left-right-both-none效果</title>
<style type="text/css" >
.container{
height:200px;
400px;
}
.f_left,.f_right{
float: left;
80px;
height:80px;
background-color:#ccc;
border:1px solid #666;
font-size:13px;
color:#444;
}
.f_right{
float: right;
}
</style>
</head>
<body>
<div class='container'>
<div class='f_left'>
float: left;【1】
</div>
<div class='f_left'>
float: left;【2】
</div>
<div class='f_left' style='clear:left;'>
clear:left;不允许左边有浮动，于是就掉下来，到了第二行【3】
</div>
</div>
<div class='container'>
<div class='f_left'>
float: left;【1】
</div>
<div class='f_right'>
float: right;【2】
</div>
<div class='f_left' style='clear:right;'>
clear:right;不允许右边有浮动，于是就掉下来，到了第二行【3】
</div>
</div>
<div class='container'>
<div class='f_left'>
float: left;【1】
</div>
<div class='f_left'>
float: left;【2】
</div>
<div class='f_right'>
float: right;【3】
</div>
<div class='f_left' style='clear:both;'>
clear:both;不允许左右两边浮动，于是掉下来，到了第二行【4】
</div>
</div>
<div class='container'>
<div class='f_left'>
float: left;【1】
</div>
<div class='f_right'>
float: right;【2】
</div>
<div class='f_left' style='clear:none;'>
clear:none;不清除浮动，此元素可以贴近浮动元素【3】
</div>
</div>
</body>
</html>