[分享]css中float清楚浮动不管用

CSS中有一个非常常用的属性叫做float，它可以让某个元素浮动起来，排在页面上的一侧。但是，当我们使用float属性时，往往会遇到一个问题：清除浮动不管用。下面我将结合代码，解释这个问题的产生原因以...

CSS中有一个非常常用的属性叫做float，它可以让某个元素浮动起来，排在页面上的一侧。但是，当我们使用float属性时，往往会遇到一个问题：清除浮动不管用。下面我将结合代码，解释这个问题的产生原因以及解决方法。

.parent {
  border: 1px solid #000;
  overflow: hidden; /* 这个是解决清除浮动不管用的关键 */
}

.child {
  float: left;
  width: 50%;
  height: 50px;
  background-color: #f00;
} 

首先，让我们来看一下上面这段代码。我们创建了一个包含两个子元素的父元素，两个子元素都设置了float：left属性。

如果只看子元素的效果而忽略父元素，你会发现两个子元素并排排列在页面的左边，从而实现了浮动的效果。

但是，当我们在父元素中添加border属性时，却发现边框并没有包含子元素。这就导致了一个问题，即父元素的高度没有被子元素撑开，从而显示出了溢出的情况。

解决方法非常简单，只需要在父元素中添加overflow: hidden属性即可。这个属性的作用就是让父元素的高度自适应子元素的高度，从而清除浮动不管用的情况。

总结一下，当我们使用float属性时，需要注意清除浮动的问题，否则会产生意外的效果。解决方法是在父元素中添加overflow: hidden属性。