Question

我有这个简单的html和css（sass）有一些嵌套，但并不多。我遇到的问题是，在第一个大div中，所有子元素在写入时都显示在内部，但在另一个div（相同类）中，bg-color和margin仅覆盖标题而不是该div中的其他元素。发生了什么事？

codepen link

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

由于

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容器，浮动div就没有高度。

Answer 2

这是由于.colomn的浮动，你可以使用conatain float or clearfix技术

我在下面列出了两个

1）在浮动元素后添加<p></p> clear both sides

2）将overflow:hidden添加到浮动元素的父级（即）

Read more about clearfix and containing floats

* {
  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>
    <p style="clear:both"></p> 
	</section>
 
</div>

Answer 3

我想我明白了 - 你从浮动列中删除了列

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

只需在它们之后添加一个明确的

 <div class="clear"></div>

.clear 
   clear: both;

divs不会继承css（他们应该）

3 个答案: