CSS邊距溢出（Margin Overflow）是指元素的邊距（Margin）超出了父級容器的邊界，導致元素的位置出現(xiàn)偏移或者遮擋其他元素。

div {
width: 200px;
height: 100px;
margin: 50px;
background-color: beige;
}
.wrapper {
width: 150px;
height: 150px;
border: 1px solid black;
overflow: hidden;
}

在上述代碼中，一個寬度和高度均為200px的div元素擁有50px的margin。然而，div元素被包裹在一個寬度和高度均為150px的父級元素(wrapper)內(nèi)。由于div元素的margin太大，它的邊距超出了父級元素的邊框，導致div元素超出了父級容器的邊界，不僅遮擋了其他元素，還使得div元素出現(xiàn)偏移的現(xiàn)象。

如圖所示，三個div元素都擁有50px的margin，它們排列在一起的時候也會遇到邊距溢出的問題。

為了解決這個問題，我們可以使用overflow: hidden或者overflow: auto來隱藏溢出的邊距，也可以使用padding或者border來抵消邊距的值。

.wrapper {
width: 150px;
height: 150px;
border: 1px solid black;
overflow: hidden;
padding: 10px;
}

如此一來，即便div元素的邊距溢出，由于使用了padding，元素也會被包括在內(nèi)，不會出現(xiàn)遮擋其他元素的情況。

前端開發(fā)中，邊距溢出的問題常常出現(xiàn)在布局的過程中，我們需要在排布元素的時候小心使用邊距，避免導致意外的布局問題。