div ul li 嵌套后如何解决增加多个li后DIV高度自适应问题

在 div 中嵌套 ul 和 li 元素是常见的网页布局方式。但是，当我们增加多个 li 元素时，可能会出现 div 高度不自适应的问题。下面是一个完整的攻略，包含了如何解决 div ul li 嵌套后如何解决增加多个 li 后 DIV 高度自适应问题的过程和两个示例说明。

解决 div ul li 嵌套后如何解决增加多个 li 后 DIV 高度自适应问题

1. 使用 float 清除浮动

我们可以使用 float 属性来清除浮动，以使 div 元素高度自适应。下面是一个示例：

<div class="container">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <div style="clear: both;"></div>
</div>

.container {
  border: 1px solid #ccc;
  padding: 10px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  float: left;
  margin-right: 10px;
}

上述代码中，我们使用 float 属性来使 li 元素并排一行。我们在 div 元素后添加了一个空 div 元素，并使用 clear 属性来清除浮动。这样，div 元素就可以自适应高度。

2. 使用 overflow 属性清除浮动

我们可以使用 overflow 属性来清除浮动，以使 div 元素高度自适应。下面是一个示例：

<div class="container">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

.container {
  border: 1px solid #ccc;
  padding: 10px;
  overflow: hidden;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  float: left;
  margin-right: 10px;
}

上述代码中，我们使用 overflow 属性来清除浮动。我们将其设置为 hidden，以使 div 元素自适应高度。

示例说明

下面是两个示例，演示如何解决 div ul li 嵌套后如何解决增加多个 li 后 DIV 高度自适应问题。

示例一：使用 float 清除浮动

<div class="container">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <div style="clear: both;"></div>
</div>

.container {
  border: 1px solid #ccc;
  padding: 10px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  float: left;
  margin-right: 10px;
}

上述代码中，我们使用 float 属性来使 li 元素并排一行。我们在 div 元素后添加了一个空 div 元素，并使用 clear 属性来清除浮动。这样，div 元素就可以自适应高度。

示例二：使用 overflow 属性清除浮动

<div class="container">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

.container {
  border: 1px solid #ccc;
  padding: 10px;
  overflow: hidden;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  float: left;
  margin-right: 10px;
}

上述代码中，我们使用 overflow 属性来清除浮动。我们将其设置为 hidden，以使 div 元素自适应高度。