CSS 中，子元素可能會脫離父元素導致布局出現意外的情況。這是由于子元素的position屬性的不同取值引起的。下面我們來分別講解一下這些情況。

1. 默認情況

父元素 {
position: static; /* 默認值 */
}
子元素 {
position: static; /* 默認值 */
}

在這種情況下，父元素會正常包裹子元素，沒有脫離問題。這種布局稱為常規流（Normal Flow）。

2. 子元素使用 absolute

父元素 {
position: relative;
}
子元素 {
position: absolute;
top: 0;
left: 0;
}

在這種情況下，子元素脫離了父元素，相對于整個文檔定位。因為父元素的 position 取值為 relative，此時子元素的位置是相對于父元素左上角的。如果想讓子元素相對于父元素的中心位置定位，可以將 top 和 left 屬性設置為 50% 并配合 transform 屬性使用。

3. 子元素使用 fixed

父元素 {
position: relative;
}
子元素 {
position: fixed;
top: 0;
left: 0;
}

在這種情況下，子元素同樣脫離了父元素，相對于整個文檔定位。但是這時候子元素會固定在瀏覽器窗口中的某個位置，不隨滾動條滾動而移動。因此，這種情況下建議使用 JavaScript 來調整子元素的位置。

4. 子元素使用 float

父元素 {
overflow: hidden; /* 防止父元素高度塌陷 */
}
子元素 {
float: left;
}

在這種情況下，子元素同樣脫離了父元素，但是相對于父元素的位置不變。因為子元素的 position 取值為 static（默認值），因此浮動不影響它相對于父元素的位置。不過，這時候需要注意到父元素的高度可能會因為子元素的浮動而塌陷，需要使用 Clearfix 清除浮動。

以上就是子元素脫離父元素的情況及其解決方案。我們需要根據具體情況選擇不同的 position 取值來解決相關問題。