html - 清除 :both with h2 tag: h2 margins doens't work

标签 html css

我有float: left div，我想清除它后面的 float 。如果我插入 <div style="clear:both;"></div>就在 float div 之后，它工作正常。问题是我需要一个没有额外的解决方案 div .

我添加了 clear:both对于 h2标签，它有效，但不考虑 h2 上边距。

HTML:

<p class="with_arrow_down">IF you don’t know the cost you are&nbsp;probably making the wrong decisions</p>
<!--<div style="clear:both;"></div>-->

<h2 class="bigmargin">Check list for maintaining the highest levels </h2>

CSS:

.with_arrow_down {        
    padding-top: 44px;
    height: 30px;
    width: 28%;
    text-align: center;
    margin-left: 5%;
    float: left;
}
.with_arrow_down:nth-of-type + * {
    clear: both;
}
h2.bigmargin {
    margin: 65px 0 65px 0;
    clear:both;
}

请解释一下如何使 h2 边距起作用。

JSFIddle:http://jsfiddle.net/smdgg/3/

最佳答案

它确实有效。

您的 JS Fiddle 演示缺少问题中 h2 的 clear: both 规则。

如果我们 update it那么唯一的问题是它与之前的内容重叠，因为该元素具有固定的高度，所以内容会溢出，这可以通过 setting overflow hidden 来证明。 .

关于html - 清除 :both with h2 tag: h2 margins doens't work，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17764410/