float:left不起作用

HTML代码：

    <div class="nav">
        <div  class="nav_left">div>
    <div class="nav_mid">
      <div class="nav_mid_left">
        <ul>
          <li><a href="#">首页a>li>
          <li><a href="list.html">关于慕课a>li>
          <li><a href="list.html">新闻动态a>li>
          <li><a href="list.html">课程中心a>li>
          <li><a href="list.html">在线课程a>li>
          <li><a href="list.html">人才招聘a>li>
        ul>
      div>
      
      <div class="nav_mid_right">
        <form action="" method="post">
          <input type="text" class="search_text" />
          
        form>
      div>
       
    div>

CSS样式：

.nav{
    height: 40px;

}

.nav_left{
    width: 10px;
    background: url('../images/nav_left.jpg')no-repeat;
}

.nav_mid{
    width: 980px;
    background: url('../images/nav_bg.jpg')repeat-x;
}   

.nav_right{
    width: 10px;
    background: url('../images/nav_right.jpg')no-repeat;

}

.nav_left,.nav_mid,.nav_right{
    float: left;
    height: 40px;
    display: inline;
}

然而，实际网页显示，nav_left中的块元素浮动没有效果。

通过把.nav的类也加上float就可以解决这个问题。

.nav{
    height: 40px;
    float:left;
}