，我們來看一個(gè)簡(jiǎn)單的例子。在下面的代碼中，我們創(chuàng)建了一個(gè)父容器div，并設(shè)置其寬度為200px，高度為200px。然后，在div內(nèi)部創(chuàng)建了一個(gè)子元素span，該子元素的寬度為300px，高度為50px。
<code> <div style="width: 200px; height: 200px; border: 1px solid black;"> <span style="width: 300px; height: 50px; background-color: red;"></span> </div> </code>
默認(rèn)情況下，當(dāng)子元素的寬度超過父容器寬度時(shí)，子元素會(huì)溢出容器并覆蓋在父容器之外。這是因?yàn)閛verflow屬性的默認(rèn)值是visible，表示內(nèi)容溢出容器時(shí)不進(jìn)行任何裁剪。可以看到，上述代碼中的子元素span的寬度超過了父容器div的寬度，所以span的一部分內(nèi)容超出了div的范圍并顯示在div外面，導(dǎo)致整個(gè)頁面布局混亂。
要解決這個(gè)問題，我們可以將overflow屬性設(shè)置為其他值，例如hidden。當(dāng)overflow屬性設(shè)置為hidden時(shí)，超出容器范圍的內(nèi)容將被裁剪隱藏，不會(huì)影響頁面布局。
<code> <div style="width: 200px; height: 200px; border: 1px solid black; overflow: hidden;"> <span style="width: 300px; height: 50px; background-color: red;"></span> </div> </code>
上述代碼中，我們添加了overflow: hidden;屬性來修復(fù)溢出的問題。現(xiàn)在，當(dāng)子元素span的寬度超過父容器div的寬度時(shí)，超出的部分將被隱藏裁剪，不再影響頁面布局。
除了hidden和visible之外，我們還可以使用overflow屬性的另外兩個(gè)值：scroll和auto。當(dāng)overflow屬性設(shè)置為scroll時(shí)，如果內(nèi)容超出容器大小，會(huì)顯示滾動(dòng)條，用戶可以通過滾動(dòng)條來查看完整內(nèi)容。而當(dāng)overflow屬性設(shè)置為auto時(shí)，瀏覽器將自動(dòng)判斷是否需要顯示滾動(dòng)條，如果內(nèi)容超出容器大小，會(huì)顯示滾動(dòng)條，否則不顯示。
<code> <div style="width: 200px; height: 200px; border: 1px solid black; overflow: scroll;"> <span style="width: 300px; height: 50px; background-color: red;"></span> </div> </code>
上述代碼中，我們將overflow屬性設(shè)置為scroll，當(dāng)子元素span的寬度超過父容器div的寬度時(shí)，會(huì)顯示水平滾動(dòng)條和垂直滾動(dòng)條，用戶可以通過滾動(dòng)條來查看完整內(nèi)容。
綜上所述，通過合理設(shè)置overflow屬性，我們可以控制元素內(nèi)容溢出時(shí)的顯示方式，以實(shí)現(xiàn)更好的頁面布局效果。