CSS 如何通过子 div 的宽度/内边距/外边距/边框来强制扩展父级 div

在本文中，我们将介绍如何通过子 div 的宽度、内边距、外边距和边框来强制扩展父级 div。使用 CSS，我们可以通过一些技巧和属性来实现这个目标。

阅读更多：CSS 教程

子 div 宽度强制扩展父级 div

要强制父级 div 按照子 div 的宽度扩展，我们可以使用以下方法：

使用 display: inline-block。这将使子 div 在同一行内排列，并且父级 div 会根据子 div 的宽度来进行扩展。

.parent {
  background-color: #f2f2f2;
}

.child {
  display: inline-block;
  width: 200px;
  height: 100px;
  background-color: #ccc;
}

使用 float: left。这将使子 div 浮动，并且父级 div 会根据子 div 的宽度进行扩展。

.parent {
  background-color: #f2f2f2;
  overflow: hidden;
}

.child {
  float: left;
  width: 200px;
  height: 100px;
  background-color: #ccc;
}

子 div 内边距强制扩展父级 div

要强制父级 div 根据子 div 的内边距进行扩展，我们可以使用以下方法：

使用 box-sizing: border-box 和负的外边距。这将使子 div 的内边距被包含在内，不会影响父级 div 的宽度。

.parent {
  background-color: #f2f2f2;
  overflow: hidden;
}

.child {
  width: 200px;
  height: 100px;
  padding: 20px;
  margin: -20px;
  background-color: #ccc;
  box-sizing: border-box;
}

使用 position: absolute 和 left: -Xpx。这将使子 div 进行绝对定位，并且父级 div 会根据子 div 的内边距进行扩展。

.parent {
  background-color: #f2f2f2;
  position: relative;
  padding-left: 20px;
}

.child {
  width: 200px;
  height: 100px;
  padding: 20px;
  background-color: #ccc;
  position: absolute;
  left: -20px;
}

子 div 外边距强制扩展父级 div

要强制父级 div 根据子 div 的外边距进行扩展，我们可以使用以下方法：

使用 overflow: hidden。这将触发父级 div 的 BFC（块级格式化上下文），并且父级 div 会根据子 div 的外边距进行扩展。

.parent {
  background-color: #f2f2f2;
  overflow: hidden;
}

.child {
  width: 200px;
  height: 100px;
  margin: 20px;
  background-color: #ccc;
}

使用 display: inline-block。这将使子 div 改变为内联块元素，并且父级 div 会根据子 div 的外边距进行扩展。

.parent {
  background-color: #f2f2f2;
}

.child {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 20px;
  background-color: #ccc;
}

子 div 边框强制扩展父级 div

要强制父级 div 根据子 div 的边框进行扩展，我们可以使用以下方法：

使用 box-sizing: border-box 和负的外边距。这将使子 div 的边框被包含在内，不会影响父级 div 的宽度。

.parent {
  background-color: #f2f2f2;
  overflow: hidden;
}

.child {
  width: 200px;
  height: 100px;
  padding: 20px;
  margin: -20px;
  border: 5px solid #ccc;
  box-sizing: border-box;
}

使用 position: absolute 和 left: -Xpx。这将使子 div 进行绝对定位，并且父级 div 会根据子 div 的边框进行扩展。

.parent {
  background-color: #f2f2f2;
  position: relative;
  padding-left: 20px;
}

.child {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid #ccc;
  position: absolute;
  left: -20px;
}