CSS 是前端開發(fā)中重要的技能之一，但是即使對于經(jīng)驗豐富的開發(fā)人員來說，也會有一些需要注意的小問題。下面是 CSS 中常見坑的示例，以及如何避免它們。

/* 坑1：浮動元素未清除，影響布局。 */
/* 解決方法1：用clear:both清除浮動。 */
.clearfix:after {
content: "";
display: table;
clear: both;
}
/* 解決方法2：使用 overflow:hidden 觸發(fā) BFC（塊級格式化上下文）。*/
.container {
overflow: hidden;
}
/* 坑2：選擇器的優(yōu)先級問題。*/
/* 解決方法：使用更具體的選擇器或 !important。*/
.header-nav {
color: red !important;
}
/* 坑3：使用 em 或 rem 作為字體單位時，影響布局。*/
/* 解決方法1：使用 px 代替 em 和 rem 單位，避免改變字體大小對布局的影響。*/
body {
font-size: 16px;
}
/* 解決方法2：使用固定的容器寬度或百分比寬度代替寬度單位與 font-size 相關。*/
.container {
width: 960px;
}
/* 坑4：使用 float 屬性造成內部元素高度塌陷。*/
/* 解決方法：使用 overflow 或 clearfix 技術清除浮動元素。*/
.container {
overflow: hidden;
}
/* 坑5：使用 absolute 定位時，參考父元素位置。*/
/* 解決方法：設置父元素為相對定位，子元素設置絕對定位。*/
.container {
position: relative;
}
.inner {
position: absolute;
top: 0;
left: 0;
}