CSS中的避頭尾（margin collapsing）是指兩個元素之間的垂直margin值會發生合并的現象，這個合并后的值通常是二者中較大的值。在理解margin collapsing的情況下，我們可以更好的調整和控制我們的樣式。

避免margin collapsing的方法有很多，下面我們來介紹三個常用的方法：

1.使用父元素的border、padding屬性
.parent{
border: 1px solid #000;
padding: 1px;
}

這種方式將父元素 border 和 padding 的設置加入到垂直 margin 中去，從而達到不會發生 margin collapsing 的效果。

2.使用overflow屬性
.parent{
overflow: hidden;
}

這種方案是通過給包含子元素的父元素添加 overflow 屬性來實現的。它的原理是讓父元素創建一個新的 BFC(Block Formatting Context)，BFC 可以避免垂直 margin 的合并。
需要注意的是，該方案只對 block-level box 生效。

3.使用偽元素清除浮動
.clearfix::after{
content: "";
display: table;
clear: both;
}

這是清除浮動最受歡迎和廣泛使用的一種方法。通過添加一個 ".clearfix" 的類名，并在 CSS 中添加偽元素 "::after"，清除了浮動帶來的問題。::after 元素是一個塊級元素，所以它會產生一個額外的塊級格式化上下文。

以上三種方法都非常實用且容易掌握。當需要避免 margin collapse 的情況時，可以采用其中的一種方法進行解決。