主页 / 问题 / 687540
Accepted
Yuri
Asked:2020-07-05 19:05:18 +0000 UTC2020-07-05 19:05:18 +0000 UTC

使用浮动时父级高度丢失

  • 772

我遇到了一个问题：当为所有子元素指定 float 时，父元素的高度就会丢失，即 去了0px。

例子：

.parent {
  width: 162px;
  border: 2px solid red;
}
.children {
  width: 50px;
  height: 50px;
  border: 2px solid blue;
  float: left;
}
<div class="parent">
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
</div>

为什么父元素不再考虑子元素的高度？怎么修？

css

1 个回答

  1. Best Answer

    父级不再考虑子元素的高度，因为浮动元素会创建一个新的堆叠上下文并脱离元素流。

    有四个选项可以解决您的问题：

    1. 如果所有的子元素都有一个固定的高度，那么我们为父元素指定一个固定的高度：

      .parent {
  width: 162px;
  border: 2px solid red;
  /* Фиксированная высота */
  height: 54px;
}
.children {
  width: 50px;
  height: 50px;
  border: 2px solid blue;
  float: left;
}
      <div class="parent">
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
</div>

    2. 最常见的选项是clearfix。创建具有以下样式的单个元素或伪元素cler: both;：

      .parent {
  width: 162px;
  border: 2px solid red;
}
.children {
  width: 50px;
  height: 50px;
  border: 2px solid blue;
  float: left;
}

/* Clearfix */
.clearfix {
  display: table;
  clear: both;
  visibility: hidden;
}

.parent.b:after {
  content: '';
  display: table;
  clear: both;
  visibility: hidden;
}
      <p>С элементом:</p>

<div class="parent a">
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
  
  <div class="clearfix"></div>
</div>

<p>С псевдоэлементом:</p>

<div class="parent b">
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
</div>

    3. 最有趣但效率最低的选项之一是为父元素指定一个浮点数，然后它也会脱离一般流程并与子元素“合并”：

      .parent {
  width: 162px;
  border: 2px solid red;
  /* Float */
  float: left;
}
.children {
  width: 50px;
  height: 50px;
  border: 2px solid blue;
  float: left;
}
      <div class="parent">
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
</div>

    4. 最后一个选项是将溢出指定给父级。Overflow 为所选元素创建一个单独的格式化上下文，从而在应用它的元素内本地化 float 属性的效果。更多的...

      .parent {
  width: 162px;
  border: 2px solid red;
  /* Overflow */
  overflow: auto;
  /* Можно устанавливать следущие значения:
     auto, hidden, overlay, scroll
  */
}
.children {
  width: 50px;
  height: 50px;
  border: 2px solid blue;
  float: left;
}
      <div class="parent">
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
</div>

    • 5

相关问题