Html 浮动两个div元素而不影响下一个div元素

我试图将两个元素并排浮动，但是前面的div元素似乎按照下面的步骤介于这两个元素之间。i、 e我想在左边找到最好的供应商，在右边的同一行中登录/注册，并在下面找到所有其他内容

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>

寻找最好的供应商
时尚

如果要执行此操作，请访问以下链接：

时尚

您必须使用clearfix类清除浮动

.clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

---

在css类中更改以下内容

.custom-section-head 
   {
    margin: 20px 0px 0px 0px;
  }
.tools-login
 {
   margin: 30px 0px 0px 0px;
  }

---

将

添加到
之前，您应该清除
末尾的浮动。自定义小部件头
元素，如下所示：说明
.custom-section-head 
   {
    margin: 20px 0px 0px 0px;
  }
.tools-login
 {
   margin: 30px 0px 0px 0px;
  }