我该如何为此做css？

Question

我是css的新手,这让我很难过.

1. 如何让父div始终包含其子项？一旦我开始使用浮动进行对齐,父级就会停止包含子级.
2. 我实际上不想漂浮东西.我想对齐它们.我们如何在CSS中进行对齐和边距,还没有对所有维度进行硬编码？
3. 有人可以为此慷慨解囊吗？让我们假设为了这个例子,总宽度是960px,所有边距都是15px;

Answer 1

三种选择:

1. 设置clear: both在绿色元素上.
2. overflow: hidden在父容器上设置.
3. 在父容器上使用clearfix.

Answer 2

让我们看一个清晰灵活的版本:

#container { background: gray; overflow: hidden; padding: 15px; }
#left { background: purple; width: 200px; float: left; margin: 0 15px 15px 0; } 
#content { background: blue; overflow: hidden; margin: 0 0 15px 0 } 
#footer { background: green; height: 50px; clear: left; } 

即使是width和height你看到一组是不必要的,省略当箱子可以调整其内容,我只是说他们用于演示目的.

• jsFiddle演示
• overflow: hidden 影响布局
• Chris Coyier:All About Floats