使用CSS的overflow属性防止float撑开div的方法

当一个父元素包含了浮动的子元素时，若该子元素宽度超出父元素宽度，则会撑开父元素，导致布局混乱。为了解决这个问题，可以使用 CSS 的 overflow 属性来控制子元素的溢出部分。

当一个父元素包含了浮动的子元素时，若该子元素宽度超出父元素宽度，则会撑开父元素，导致布局混乱。为了解决这个问题，可以使用 CSS 的 overflow 属性来控制子元素的溢出部分。

具体来讲，有以下两种方法可以使用 CSS 的 overflow 属性防止 float 撑开 div。

方法一：使用overflow:hidden

可以通过设置父元素的 overflow 属性为 hidden，来使父元素包含自身和子元素的宽度。

.parent {
  overflow: hidden;
}

这里的 .parent 是父元素的类选择器。

示例代码如下：

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

.parent {
  overflow: hidden;
}

.child {
  width: 300px;
  height: 150px;
  margin-right: 20px;
  float: left;
}

方法二：使用overflow:auto

对于方法一，如果子元素高度超出父元素高度也会被隐藏。为了避免这种情况，可以使用 overflow: auto 来自动绘制滚动条。

.parent {
  overflow: auto;
}

这里的 .parent 是父元素的类选择器。

示例代码如下：

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

.parent {
  overflow: auto;
}

.child {
  width: 300px;
  height: 150px;
  margin-right: 20px;
  float: left;
}

以上两种方法都是通过设置 overflow 属性来防止 float 撑开 div 的常见做法。注意：使用 overflow 属性控制子元素溢出的时候，一定要保证父元素的宽高以及子元素的宽高都已经确定，否则可能导致布局出现其他问题。