尽管有Clearfix，Floated Element仍会触发鼠标悬停

Question

我有一个信息表，我使用包含浮动的无序列表构建。每个Float都已经固定，但浮动元素超出了无序列表本身，在整个页面上拉伸标记，并设法触发远远超出表本身的鼠标。什么是杀死浮动的正确方法，因此它们基本上显示：当超出我的元素时没有？

here is the html code

#sortable_list{

  list-style: none;
  margin: 0;
  padding: 0;
  font:12px Arial Helvitica Geneva sans-serif;
}
#sortable_list li.header div{
  background-color:orange;
  font-weight:bold;
  cursor:default;
}
#sortable_list li div{
  display:block;
  float:left;

  border-right:1px solid #000;
  padding:3px 5px;
}
.border_bottom_1px{border-bottom:1px solid #000;}
.border_bottom_2px{border-bottom:2px solid #000;}

#sortable_list li div.listitem_mesh{width:150px; border-left:1px solid #000;}
#sortable_list li div.listitem_wire_diameter_inches{width:150px;}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

a:hover li.listitem div {background-color:#e0e0e0;}

Welded Wire Mesh
<ul id="sortable_list" style="margin-left:auto; margin-right:auto;">
  <!-- Header -->
  <li class="header clearfix">
    <div class="listitem_mesh">Mesh (Inches)</div>
    <div class="listitem_wire_diameter_inches">Wire Diameter (Inches)</div>
  </li>


  <!-- Items -->

  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_1px">4 x 4</div>
      <div class="listitem_wire_diameter_inches border_bottom_1px">.255</div>
    </li>
  </a>

  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_1px">4 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_1px">.135</div>
    </li>
  </a>

  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">4 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.120</div>
    </li>
  </a>	

  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_1px">4 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_1px">.1055</div>
    </li>
  </a>

  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_1px">2 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_1px">.080</div>
    </li>
  </a>

  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.250</div>
    </li>	
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.1875</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.135</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.120</div>
    </li>	
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.105</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.080</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1.5 x 1.5</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.105</div>
    </li>	
  </a>


  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x 1</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.080</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x 1</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.063</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.120</div>
    </li>	
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.105</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.080</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.063</div>
    </li>	
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 1</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.1875</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 1</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.135</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 1</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.120</div>
    </li>	
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 1</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.105</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 1</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.092</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 1</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.080</div>
    </li>	
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 1</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.063</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 1.5</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.080</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">1 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.162</div>
    </li>	
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">.75 x .75</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.120</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">.75 x .75</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.105</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">.75 x .75</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.080</div>
    </li>	
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">.75 x .75</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.063</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">.75 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.047</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">.625 x .625</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.041</div>
    </li>	
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.063</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.047</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.041</div>
    </li>	
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x 2</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.035</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2 x .5</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.063</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2.5 x 2.5</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.063</div>
    </li>	
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">2.5 x 2.5</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.047</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">3 x 3</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.063</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">3 x 3</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.048</div>
    </li>	
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">3 x 3</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.047</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">3 x 3</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.041</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">3 x 3</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.032</div>
    </li>	
  </a>

  <!----------------------------------  //-->



  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">4 x 4</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.032</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">4 x 4</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.028</div>
    </li>	
  </a>
  <a href="">
    <li class="clearfix listitem">
      <div class="listitem_mesh border_bottom_2px">4 x 4</div>
      <div class="listitem_wire_diameter_inches border_bottom_2px">.025</div>
    </li>	
  </a>


</ul>