css让子Div浮动父权

CSS如何让子元素浮动父元素：

在CSS中，使用浮动属性可以控制元素在文档流中的位置。当给子元素设置浮动属性时，它将脱离文档流并且可以与其他元素并排显示。然而，如果子元素浮动，父元素可能失去高度，导致布局问题。下面将介绍几种方法来解决子元素浮动导致父元素高度塌陷的问题。

清除浮动(Clearfix)

清除浮动 (clearfix) 是一种常见的解决浮动问题的方法。通过在父元素上添加clearfix类，可以保证父元素正确地包含浮动的子元素。

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

清除浮动最常用的方法是在父元素上添加clearfix类。这样做会在父元素内部创建一个伪元素，并使用clear:both属性清除浮动影响，从而使父元素正确地包含子元素：

<div class="clearfix">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
</div>

使用overflow属性

另一种解决父元素高度塌陷的方法是设置父元素的overflow属性为auto或hidden。overflow:hidden将剪切超出父元素范围的内容，而overflow:auto将显示滚动条以便查看所有内容。

.parent {
  overflow: hidden; /* 或者 overflow: auto; */
}

通过将overflow属性设置为hidden或auto，父元素将包含子元素的浮动，从而解决父元素高度塌陷的问题。

使用::after伪元素

使用::after伪元素也是解决父元素高度塌陷的一种常见方法。通过在父元素上添加::after伪元素，并设置clear:both属性，可以清除浮动影响。

.parent::after {
  content: "";
  display: table;
  clear: both;
}

在这种方法中，通过在父元素上创建一个空的伪元素，然后设置clear:both属性清除浮动。这样父元素就能够正确地包含子元素。

综上所述，有多种方法可以解决子元素浮动导致父元素高度塌陷的问题。可以根据具体情况选择适合自己的方法来让子元素浮动父元素。