html - float 两个 div 元素而不影响下一个 div 元素

Question

我试图并排 float 两个元素，但根据 fiddle，前面的 div 元素似乎介于两者之间.即我想在左边找到最好的供应商，在右边的同一行中登录/注册，下面是所有其他内容。

HTML:

<div id="home-dir-left">
 <div class="custom-widget-head">
   <h3><span class="custom-section-head"> Find the Best Vendor</span></h3>
     <a href="/login/" class="btn tools-login">Login / Register</a>
 </div>

  <div class="homecat-columns">
    <div class="span2 directory-categories">
       <div class="custom-widget-head">
         <h4><span class="dircat-head"> Fashion</span></h4>
       </div>   

      <span class="span-dircat">
         <ul>
    <li><a href="/listings/category/bridal-accessories/">Bridal Accessories</a></li>
         </ul>
  </span>

   </div>
 </div>
</div>

Answer 1

你想这样做吗，请访问链接:

http://jsfiddle.net/pLBmz/2/

        <div class="custom-widget-head"style="clear:both;">
            <h4><span class="dircat-head"> 
    Fashion</span></h4>

        </div>  <span class="span-dircat">

        <ul>
            <li><a href="/listings/category/bridal-accessories/">Bridal Accessories</a>


        </li></ul>
    </span>