HTML <hr> tag strange display

Question

<hr/>タグが奇妙に表示されるのはなぜですか？それを修正するには？

にHomeController：

namespace MvcApplication4.Controllers 
{ 
public class HomeController : Controller 
{ 
    // 
    // GET: /Home/ 

    public ActionResult Index() 
    { 
     List<Department> department = new List<Department>(); 
     department.Add(new Department { Computers = new List<Computer> { new Computer { ID = 1 }, new Computer { ID = 2 } }, Employees = new List<Employee> { new Employee { Number = 1, Text = "Jhon" }, new Employee { Number = 2, Text = "Conorrrrrrrrrrrr" }, new Employee { Number = 3, Text = "Nick" } } }); 
     department.Add(new Department { Computers = new List<Computer> { new Computer { ID = 1 }, new Computer { ID = 2 }, new Computer { ID = 3} }, Employees = new List<Employee> { new Employee { Number = 1, Text = "David" } } }); 
     return View(new IndexViewModel { Department = department }); 
    } 
} 
public class IndexViewModel 
{ 
    public IEnumerable<Department> Department { get; set; } 

} 

public class Department 
{ 
    public IEnumerable<Employee> Employees { get; set; } 

    public IEnumerable<Computer> Computers { get; set; } 
} 

public class Computer 
{ 
    public int ID {get;set;} 
} 
public class Employee 
{ 
    public string Text { get; set; } 

    public int Number { get; set; } 
} 
} 

Index.cshtml：

@model MvcApplication4.Controllers.IndexViewModel 
@{ 
    ViewBag.Title = "Index"; 
} 

<h2>Index</h2> 

@foreach(var department in Model.Department) 
{ 
<table style="float:left;"> 
    <tbody> 
     @foreach (var computer in department.Computers) 
     { 
      <tr> 
       <td> 
        @computer.ID 
       </td> 
      </tr> 
     } 
    </tbody> 
</table> 

<table> 
    <tbody> 
     @foreach (var employee in department.Employees) 
     { 
      <tr> 
       <td> 
        @employee.Text 
       </td> 
       <td> 
        @employee.Number 
       </td> 
      </tr> 
     } 
    </tbody> 
</table> 
<br /> 
<hr /> 
} 

Answer 1

あなたはフロートをクリアする必要があります。それ以外の場合は、hrが浮動表の直後にある場合は、右側に表示されます。

<hr style="clear:left" /> 

かは、好ましくは、あなたのスタイルシートに

hr {clear:left;} 

を置きます。