DIV设置float后父容器无法定位高度的问题解决方法

当子元素设置了float属性之后，父元素就会无法自适应子元素高度，导致页面布局错误。针对这个问题，一般有以下几种解决方法：

当子元素设置了float属性之后，父元素就会无法自适应子元素高度，导致页面布局错误。针对这个问题，一般有以下几种解决方法：

1. 使用CSS的clear属性

当子元素设置float属性时，可以在父元素中添加一个空的块元素，然后给这个块元素添加CSS的clear属性，属性值设置为both，就可以清除子元素的浮动影响，让父容器自适应高度。

示例代码：

<div class="parent">
  <div class="child-left">我是左侧子元素</div>
  <div class="child-right">我是右侧子元素</div>
  <div style="clear:both;"></div>
</div>

.parent {
  border: 1px solid #ccc;
  padding: 10px;
}
.child-left {
  width: 50%;
  float: left;
  border: 1px solid #f00;
  padding: 10px;
}
.child-right {
  width: 50%;
  float: right;
  border: 1px solid #f00;
  padding: 10px;
}

2. 使用CSS的overflow属性

可以给父容器添加CSS的overflow属性，并将属性值设置为auto或hidden，也可以清除子元素的浮动影响，使父容器自适应高度。

示例代码：

<div class="parent">
  <div class="child-left">我是左侧子元素</div>
  <div class="child-right">我是右侧子元素</div>
</div>

.parent {
  border: 1px solid #ccc;
  padding: 10px;
  overflow: auto;
}
.child-left {
  width: 50%;
  float: left;
  border: 1px solid #f00;
  padding: 10px;
}
.child-right {
  width: 50%;
  float: right;
  border: 1px solid #f00;
  padding: 10px;
}

以上两种方法都可以解决子元素浮动引起的父容器高度不确定的问题，但是clear属性法有时候会对布局带来一些影响，而overflow属性法则会在父元素内容过多时出现滚动条，影响用户体验。在实际开发中，需要根据需求和情况进行选择。