<div不被撐大的問題是在前端開發中常遇到的一個問題。當我們使用div標簽布局頁面時，有時會發現div的寬度或高度超出了我們的預期。本文將從幾個代碼案例入手，詳細解釋這個問題，并參考其他文章中的真實案例進行說明。

案例一：父元素使用了浮動

<div class="parent">
<div class="child"></div>
</div>
<br>
<style>
.parent {
float: left;
}
.child {
width: 100px;
height: 100px;
}
</style>

在這個案例中，父元素使用了浮動屬性，而子元素設置了固定的寬度和高度。然而，你會發現子元素的寬度并沒有被限制在100px，而是撐大了父元素的寬度。這是因為浮動元素會脫離文檔流，父元素的寬度默認是自適應的。

解決這個問題的一種方法是給父元素添加一個clearfix類，通過清除浮動來修復撐大的問題。

<div class="parent clearfix">
<div class="child"></div>
</div>
<br>
<style>
.parent {
float: left;
}
.child {
width: 100px;
height: 100px;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>

案例二：子元素使用了絕對定位

<div class="parent">
<div class="child"></div>
</div>
<br>
<style>
.parent {
position: relative;
width: 200px;
height: 200px;
}
.child {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>

在這個案例中，子元素使用了絕對定位，并通過transform屬性將其居中對齊。然而，你會發現子元素的寬度和高度并沒有被限制在100px，而是撐大了父元素的寬度。這是因為絕對定位元素會脫離文檔流，父元素的寬度默認是自適應的。

解決這個問題的一種方法是給父元素添加一個相對定位，并設置overflow屬性為hidden，以限制子元素的大小。

<div class="parent">
<div class="child"></div>
</div>
<br>
<style>
.parent {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.child {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>

參考其他文章的真實案例

除了上述案例，還有其他一些真實的案例中存在div被撐大的問題。例如，在使用flex布局時，當子元素的寬度超過父元素的寬度時，父元素會自動擴展以容納子元素，導致div被撐大的問題。解決這個問題的方法是使用flex-shrink屬性將子元素的寬度進行縮小。

<div class="parent">
<div class="child"></div>
</div>
<br>
<style>
.parent {
display: flex;
width: 200px;
height: 200px;
}
.child {
flex-shrink: 0;
width: 300px;
height: 100px;
}
</style>

通過上述案例和真實的參考案例，我們可以看到在布局過程中，div不被撐大的問題是經常出現的。通過正確的CSS屬性設置和布局技巧，我們可以解決這個問題，從而實現我們預期的頁面效果。