Question

我有这段代码：

我想从.wrapper

的底部获得.header上边距20px

我该怎么做？

Answer 1

我已经在JS Fiddle上更新了CSS，使用的代码在

之下

.header {
    width:550px;
    margin:20px auto 20px auto;
}
.header:after{
    content: '';
    clear: both;
    display: block;
}

当您使用浮动容器时，应始终使用clearfix

Answer 2

它被破坏的原因是因为标题中的元素是 left 和 right 。如果所有元素都是浮动的左/右，则父容器（在这种情况下是标题）将折叠为0px或者不是元素的高度漂浮;有很多方法可以解决这个问题。

我更喜欢以下 - 可重用的方式。

创建一个类＆＃34; clearfix ＆＃34;您可以重复使用具有浮动子元素的元素。

.clearfix:before, 
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.wrapper {
  margin-top: 20px;
}

添加＆＃34; clearfix ＆＃34;类头部元素和瞧！元素将自我清晰＆＃34;。

例如：

<div class="header clearfix">
    <div class="left">
        <img src="" width="240px" />
    </div>

    <div class="right">
        <h1>Control Panel</h1>
    </div>
    </div>

    <div class="wrapper">
    <div class="container">
        <h1 class="login_text"></h1>
        <form>...</form>
    </div>
</div>

Answer 3

这个unclose浮动元素的原因。你可以添加像这样的CSS

.clear {clear:both;} .header {margin-bottom:20px;}

并添加<div class="clear"></div>

在您的关闭代码div "right"

之后

我更新你的小提琴

https://jsfiddle.net/kc94aq33/2/

如何从div上面的css div margin-top 20px

3 个答案: