元素内容一直显示在中间，原来是浮动的问题

问题：
      元素内容一直显示在中间，原来是浮动的问题
      代码如下：

<div class="toolbar">
       <div class="container">
           <!--            left-->
           <div class="tbLeft left">
               <ul>
                   <li><a href="#">Lorem.</a></li>
                   <li><a href="#">Lorem ipsum.</a></li>
               </ul>
           </div>
           <!--            right-->
           <div class="right">
               Welcome to the official Australian tourism website.This site uses cookies.
           </div>
       </div>
   </div>
 <section class="section1">
        <h2>Lorem ipsum dolor.</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing.
        </p>
        <div>
            <div class="btn">Lorem ipsum.</div>
        </div>
    </section>

    类toolbar， 因为设置了固定高度，就没有去清除浮动去扩展盒子的高度。
    

.toolbar {
           background-color: #004165;
           height: 46px;
       }

      就出现了，h2标题的文字，显示在中间；即时设置text-align:left 也是显示在中间




原因：
    就是因为没有清除浮动，受到了上面的浮动元素，带来的影响




解决方法：
     清除浮动的影响

.toolbar {
           background-color: #004165;
           height: 46px;
           overflow:hidden;
       }