Question

我很难整合它的crasy。我漂浮了很多东西，发现每当我开始浮动东西时，我必须浮动它的容器和容器容器，因为否则容器会崩溃。

所以看看我的网站现在它是一个相当不错的稳定但是如果我在身体上放置一个边框，我看到它顶部是1px高，身体里的一切都在外面。如果我漂浮身体，那么一切看起来都不错，但是：

1-那是不好的设计，我应该怎么做？

2-如果可以的话我该如何居中？我使用保证金：自动。但是一旦身体浮起，就会停止工作。

这是我的css。

    body {
    width: 960px;
    font-size: 13px;
    margin: auto;
    margin-top: 20px;
    border: 1px #000 solid;
}

.wrapper {
    float: left;
    width: 960px;

}

.header {
    float: left;
    width: 960px;
    border: 1px #000 solid;
    margin-bottom: 20px;
}

.menu {
    width: 960px;
    float: left;
    border: 1px #000 solid;
}

.sidebar {
    width: 260px;
    float: left;
    margin-top: 20px;
    margin-left: 20px;
}

.content {
     border: 1px #000 solid;
   margin-left: 20px;
    margin-top: 20px;
    width: 620px;
    float: left;
    padding: 10px;
}

.footer {
    border: 1px #000 solid;
    width: 960px;
    float: left;
    margin-top: 20px;
}

布局文件：

<body> 
        <div class="wrapper"> 
            <div class="header"> 
                <h1>HEADER</h1> 
            </div> 
            <div class="menu"> 
                <ul> 
                    <li><a href="/">Home</a></li> 
                </ul> 
            </div> 
            <div class="sidebar"> 
                sidebar
            </div> 
            <div class="content"> 
                    <h1>Content</h1> 
            </div> 
            <div class="footer"> 
                 <h1>FOOTER</h1> 
            </div> 
        </div> 
    </body>

无论如何希望我很清楚。

Answer 1

用[{1}}中的overflow: auto替换浮点数，它应该可以正常工作。然后，您可以将其与.wrapper：

对齐

margin: auto

此外，请从.wrapper { overflow: auto; margin: auto; width: 960px; }移除width: 960px和margin: auto，因为您不再需要它们。

Answer 2

如果您将容器的overflow设置为auto或hidden，则不必将其浮动（除非您出于其他原因）。如：

<div id="container">
   <div id="left">Content! this should be floated left</div>
</div>

#container { overflow: auto; border: 1px solid #000; }
#left { float: left; }

应该{{1}}显示所有内容的边框。

Answer 3

是的，浮动所有这些元素是糟糕的设计和滥用浮动元素。学习元素的自然流动和正确使用CSS位置是值得的。

我可以在css中漂浮身体吗？

3 个答案: