html - div 不继承 css(他们应该)

Question

我有这个带有一些嵌套的简单 html 和 css (sass)，但不多。我遇到的问题是，在第一个大 div 中，所有子元素都按照编写的方式显示在内部，但在另一个 div(同一类)中，bg-color 和边距仅覆盖标题，而不覆盖该 div 中的其他元素。 发生了什么事？

codepen link

* {
  box-sizing: border-box;
}

.intro {
  position: relative;
  display: block;
  background: #F3F5F8;
  padding: 50px 0;
  text-align: center;
  color: slategray;
}
.intro:nth-child(2) {
  background: #e8e6e3;
}
.intro section {
  margin-left: auto;
  margin-right: auto;
  padding-left: 50px;
  padding-right: 50px;
  width: 600px;
}
.intro section .column {
  position: relative;
  float: left;
  width: 33.33333%;
  padding: 0 20px;
}
.intro section .column .item {
  position: relative;
  margin: 30px auto;
  width: 15px;
  height: 15px;
  max-width: 100%;
  display: block;
  background: cadetblue;
  border-radius: 50%;
}
.intro section .column h3 {
  font: 0.6em "Montserrat", sans-serif;
  padding: 0;
  margin: 0;
  letter-spacing: 0.5em;
}
.intro section .column p {
  font: 0.8em/1.8em "Arimo", sans-serif;
  padding: 0;
  margin: 25px 0;
}
.intro section h2 {
  font: 2em "Montserrat", sans-serif;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
}
.intro section h4 {
  font: 0.6em "Montserrat", sans-serif;
  padding: 0;
  margin: 0;
  letter-spacing: 0.5em;
}
.intro section p {
  font: 0.8em/1.8em "Arimo", sans-serif;
  padding: 0 120px;
  margin: 45px 0 0;
}

<div class="intro">
	<section>
		<h4>WHO WE ARE</h4>
		<h2>HEADING</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolorum voluptas, ullam vero est.</p>
	</section>
</div>

<div class="intro">
	<section>
		<h4>WHAT WE DO</h4>
		<h2>HEADING</h2>
		<div class="column">
			<div class="item"></div>
			<h3>ITEM1</h3>
			<p>Necessitatibus ipsa ex hic sunt maxime.</p>
		</div>
		<div class="column">
			<div class="item"></div>
			<h3>ITEM2</h3>
			<p>Molestias ipsum ex deleniti illo qui obcaecati repellat.</p>
		</div>
		<div class="column">
			<div class="item"></div>
			<h3>ITEM3</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		</div>
	</section>
</div>

谢谢

Answer 1

因为您的 .column div 是 float:left; 您需要一个在列之后带有 clear:both; 的容器:

<section>
    <h4>WHAT WE DO</h4>
    <h2>HEADING</h2>
    <div class="column">
        <div class="item"></div>
        <h3>ITEM1</h3>
        <p>Necessitatibus ipsa ex hic sunt maxime.</p>
    </div>
    <div class="column">
        <div class="item"></div>
        <h3>ITEM2</h3>
        <p>Molestias ipsum ex deleniti illo qui obcaecati repellat.</p>
    </div>
    <div class="column">
        <div class="item"></div>
        <h3>ITEM3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="clearer"></div>
</section>

CSS

.clearer {
  clear:both;
}

http://codepen.io/anon/pen/myvwNY

如果没有 clear， float div 所在的容器就没有高度。