Question

我在这里使用花车并试图给出一些margin-top:100px div中的段但是边界崩溃了，如何给段落提供保证金？

＆＃13;

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

＆＃13;

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

＆＃13;

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>

或者在故事中加上一个前面的伪元素，这样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与元素顶部的元素有关。浮子元件熄灭并且边缘顶部的高度足以到达浮子容器之前的元件。改为使用填充顶部。

带有浮点数的元素的CSS margin-top

2 个答案: