在進(jìn)行頁(yè)面布局時(shí)，經(jīng)常會(huì)遇到需要設(shè)置固定高度的元素。然而，在某些情況下，我們會(huì)發(fā)現(xiàn)設(shè)置高度并沒(méi)有任何效果，這種情況就稱為"脫標(biāo)"。

什么是"脫標(biāo)"？當(dāng)一個(gè)元素處于文檔流之外，不再按照正常的排列方式進(jìn)行布局時(shí)，我們就稱該元素"脫標(biāo)"。這通常是由于使用了position屬性或者float屬性導(dǎo)致的。在這種情況下，無(wú)論我們?cè)O(shè)置多少高度，元素都會(huì)保持原有的高度。

.box {
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 200px;
}

如上示例所示，我們?cè)O(shè)置一個(gè)class為.box的定位元素，高度和寬度都為200px。然而，當(dāng)我們?cè)O(shè)置這個(gè)元素的position為absolute時(shí)，它就會(huì)脫離文檔流，導(dǎo)致height屬性無(wú)效。

那么，脫標(biāo)后我們還能不能設(shè)置高度呢？當(dāng)然可以！方法就是使用padding或者border屬性。

.box {
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
height: calc(100% - 2px);
width: calc(100% - 2px);
}

如上示例所示，我們?cè)?box元素上設(shè)置1px的邊框，然后通過(guò)calc()來(lái)計(jì)算高度和寬度，減去2px的邊框?qū)挾燃纯蓪?shí)現(xiàn)高度設(shè)置。

對(duì)于使用float屬性脫標(biāo)的元素，我們可以設(shè)置.clearfix來(lái)清除浮動(dòng)，以使元素重新加入文檔流，從而可以正常設(shè)置高度。

.clearfix:after {
content: "";
display: block;
clear: both;
}

綜上所述，雖然在脫標(biāo)狀態(tài)下設(shè)置高度無(wú)效，但我們可以通過(guò)設(shè)置padding、border或使用clearfix來(lái)實(shí)現(xiàn)高度的設(shè)置。