float：左边显示边框但不是页面的中心？

Question

检查here

当我使用此

时，我有一个<div class"main"> css

.main {
    margin: 0 auto;
    padding: 0;
    width: 1000px;
    border:2px solid #000;
    float:left;
}

它显示边框但是左边不是中心

.main {
    margin: 0 auto;
    padding: 0;
    width: 1000px;
    border:2px solid #000;
}

当我删除浮动时：左边是中心，但没有显示边框。

那么我可以用什么来显示中心的页面并显示边框？

由于

Answer 1

在你的.main中，有浮动的元素需要明确。您可以使用clearfix

清除它们

.clearfix:before,
.clearfix:after{
    display: table;
    content: "";
    line-height: 0;
}
.clearfix:after{
    clear: both;
}

将clearfix类添加到main div，如

<div class"main clearfix">...</div>

选中此Demo

Answer 2

添加浮动元素时，需要使用clear:both css属性清除元素。在关闭主div之前，在HTML中添加以下代码。

<div style="clear:both"></div>

DEMO

Answer 3

使用百分比http://jsfiddle.net/H5862/3/

尝试此操作

.main
{
   display: inline-block;
   margin-left: auto;
   margin-right: auto;
   width: 100%;
   border:2px solid #000;
}