关于博文尚美网页中的编程问题

<div id="head" class="container">
<div class="head_logo l">
<a href="#">
<img src="" alt="博文尚美" title="博文尚美">
</a>
</div>
<ul class="head_menu r">
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">客户案例</a></li>
<li><a href="#">服务项目</a></li>
<li><a href="#">新闻资讯</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<div id="banner" class="container-fluid">
<ul class="banner_list">
<li class="active" style="background-image:url(./images/1.png)"><a href="#"></a></li>
<li style="background-image:url(./images/1.png)"><a href="#"></a></li>
<li style="background-image:url(./images/1.png)"><a href="#"></a></li>
<li style="background-image:url(./images/1.png)"><a href="#"></a></li>
</ul>
<ol class="banner-btn">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
（这是body部分）

*{ margin:0; padding:0; }
ul,ol{ list-style: none; }
img{ display:block; }
a{ text-decoration: none; color: #646464;}
h1,h2,h3{ font-size: 16px; }
body{ font-family: Arial; }
.l{ float: left; }
.r{ float: right; }
.clear:after{ content:""; display:block; clear:both; }
.container{ width:1080px; margin:0 auto; position:relative; }
.container-fluid{ width:100%; }
#head{ height:81px; }
#head .head_logo{ width:162px; height:44px; margin-top:19px; }
#head .head_menu{ font-size:14px; line-height: 81px; }
#head .head_menu li{ float:left; margin-left:58px; }
.area_title{ margin-top: 60px;}
.area_title h2{ height:20px; line-height: 20px; font-size: 20px; color: #363636; background: url(../images/title_bg.png) no-repeat center 7px; font-weight: normal;}
.area_title p{ color:#9F9F9F; font-size:14px; line-height: 34px;}
（这是head部分）

id=head那段 里面两块都浮动了 但是后面banner那块没受到影响 还是正常显示在后面

这是运行效果图

清除浮动了啊

那个 .clear:after就是给父元素添加伪元素清除浮动

但是貌似没看见你HTML代码上给父元素添加clear这个类名