[分享]css中子集浮动后高度百分比

在CSS中，子元素的浮动对父元素的高度有着重要的影响。当子元素浮动时，父元素的高度将受到子元素高度的影响而发生改变，但是这个改变方式与我们预期的不尽相同，这里我们来看看其中的一些细节。.parent ...

在CSS中，子元素的浮动对父元素的高度有着重要的影响。当子元素浮动时，父元素的高度将受到子元素高度的影响而发生改变，但是这个改变方式与我们预期的不尽相同，这里我们来看看其中的一些细节。

.parent {
  border: 1px solid black;
  padding: 20px;
}

.child {
  width: 50%;
  height: 100px;
  float: left;
} 

上面的代码定义了一个parent元素作为容器，并且内部有两个child元素，这两个child元素都设置了50%的宽度，以及100px的高度。由于设置了float: left的属性，这两个child元素会并列排列在parent元素内部。

然后我们会发现一个现象，parent元素的高度将不再是100px的高度了，而是零。这是因为parent元素已经脱离了常规文档流，失去了对子元素高度的控制能力，而子元素的高度由于浮动后被提升了，但parent元素的高度仍然是零。

.parent {
  border: 1px solid black;
  padding: 20px;
  overflow: hidden;
}

.child {
  width: 50%;
  height: 100px;
  float: left;
} 

为了解决这个问题，我们需要为parent元素设置overflow: hidden的属性。这样一来，parent元素就会重新获得对子元素高度控制的能力，而子元素浮动后提升的高度也会被重新计算在内，从而正确地显示出parent元素的高度。

需要注意的是，当我们定义子元素的高度为百分比时，如果没有为parent元素明确指定一个高度值，那么parent元素的高度将无法正确定位，这时候需要为parent元素指定一个高度值，或者使用flex布局等其他方式。