Html <hr />标签奇怪显示

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;}

在样式表中。