css浮动并排div高度100％

CSS 中的浮动（float）属性常用于实现多个元素的并排布局。当需要将多个 div 元素以并排的方式展示，并且每个 div 的高度要占满父容器时，可以使用浮动属性和一些技巧来实现。

首先，我们需要创建一个包裹多个 div 的父容器，这个容器可以是一个 div 或其他块级元素。我们可以给这个容器设置宽度，并使用 clearfix 来清除浮动。

<div class="wrapper clearfix">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

接下来，我们需要给每个子元素设置浮动属性，使它们能够并排显示。同时，我们给每个子元素设置一个宽度，以达到并排的效果。

.wrapper {
  width: 100%;
  overflow: hidden; /* 使用 clearfix 清除浮动 */
}
.child {
  float: left;
  width: 33.33%; /* 每个子元素占据父容器的 1/3 宽度 */
}

使用以上的代码，我们可以实现多个 div 的并排布局。但是要注意，此时子元素的高度并没有占满父容器的高度。为了解决这个问题，我们可以给每个子元素设置一个高度为 100% 的伪类元素，并通过绝对定位将其撑开。

.child::after {
  content: "";
  display: table;
  clear: both;
}
.child-inner {
  position: relative;
  height: 100%;
}

以上代码中，给每个子元素增加了一个内部容器 `.child-inner`，并给它设置了相对定位以便于内部元素的绝对定位。然后，使用伪类 `::after` 给 `.child-inner` 添加了一个空内容，使其成为一个行内表格布局。再通过清除浮动的方式，使 `.child` 的高度能够占满父容器。

现在，子元素的高度已经被撑开，并且能够占满父容器。你可以随意在每个子元素内部添加其他元素进行布局。同时，你还可以根据需要自由调整子元素的宽度和父容器的宽度，以达到不同的效果。

总结一下，这是一种使用 CSS 浮动属性和伪类元素来实现多个并排 div 高度占满父容器的方法。通过设置每个子元素的浮动属性和宽度，并给每个子元素的内部容器设置相对定位、高度为 100% 的伪类元素，并使用 clearfix 清除浮动，可以实现这个效果。

希望以上的内容对你理解和掌握 CSS 浮动并排 div 高度占满父容器有所帮助。如果有任何疑问，请随时提问。