带有浮动元素的CSS margin-top [重复]

Question

我在这里使用花车，并尝试提供一些 margin-top:100px 到 段落 内。 但是边框崩溃了，如何给段落留边？

.float_container {
  height: auto;
  width: 600px;
  padding: 10px;
  background: #ccc;
  margin: 50px auto;
}

.float_container:after {
  content: "";
  display: block;
  clear: left;
}

.child {
  width: 150px;
  height: 100px;
  font-size: 30px;
  float: left;
  margin-left: 30px;
}

.child:nth-child(1) {
  background-color: maroon;
}

.child:nth-child(2) {
  background-color: white;
}

.child:nth-child(3) {
  background-color: red;
}

.story,
p {
  clear: both;
}

p {
  margin-top: 100px;
  //margin is not working
}

<div class="float_container">
  <div class="child "></div>
  <div class="child "></div>
  <div class="child "></div>

  <div class="sotry">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>

</div>

Answer 1

您要么需要将故事（并正确拼写）移出浮动容器

.float_container {
  height: auto;
  width: 600px;
  padding: 10px;
  background: #ccc;
  margin: 50px auto;
}

.float_container:after {
  content: "";
  display: block;
  clear: left;
}

.child {
  width: 150px;
  height: 100px;
  font-size: 30px;
  float: left;
  margin-left: 30px;
}

.child:nth-child(1) {
  background-color: maroon;
}

.child:nth-child(2) {
  background-color: white;
}

.child:nth-child(3) {
  background-color: red;
}

.story,
p {
  clear: both;
}

p {
  margin-top: 100px;
}

<div class="float_container">
  <div class="child "></div>
  <div class="child "></div>
  <div class="child "></div>
</div>
<div class="story">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

使用内边距代替边距：

.float_container {
  height: auto;
  width: 600px;
  padding: 10px;
  background: #ccc;
  margin: 50px auto;
}

.float_container:after {
  content: "";
  display: block;
  clear: left;
}

.child {
  width: 150px;
  height: 100px;
  font-size: 30px;
  float: left;
  margin-left: 30px;
}

.child:nth-child(1) {
  background-color: maroon;
}

.child:nth-child(2) {
  background-color: white;
}

.child:nth-child(3) {
  background-color: red;
}

.story,
p {
  clear: both;
}

p {
  padding-top: 100px;
}

<div class="float_container">
  <div class="child "></div>
  <div class="child "></div>
  <div class="child "></div>
<div class="story">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>

或者在故事中放置一个 before 伪元素，这样 p 就有了一些限制：

.float_container {
  height: auto;
  width: 600px;
  padding: 10px;
  background: #ccc;
  margin: 50px auto;
}

.float_container:after {
  content: "";
  display: block;
  clear: left;
}

.child {
  width: 150px;
  height: 100px;
  font-size: 30px;
  float: left;
  margin-left: 30px;
}

.child:nth-child(1) {
  background-color: maroon;
}

.child:nth-child(2) {
  background-color: white;
}

.child:nth-child(3) {
  background-color: red;
}

.story {
  clear: both;
}

.story:before {
  content: '';
  height: 0;
  display: block;
  overflow: hidden;
}

p {
  padding-top: 100px;
}

<div class="float_container">
  <div class="child "></div>
  <div class="child "></div>
  <div class="child "></div>
  <div class="story">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</div>

Answer 2

pragraph 标签的 margin-top 与父元素无关。 margin-top 曾经与元素顶部的元素相关。 浮动元素消失，margin-top 的高度不足以到达浮动容器之前的元素。 请改用 padding-top。