在CSS中，浮動(dòng)元素是非常常見的一種布局方式，但是也有很多情況下我們需要使用非浮動(dòng)元素來進(jìn)行布局。那么本文就來介紹一下CSS中的非浮動(dòng)元素。

在CSS中，除了使用浮動(dòng)元素來進(jìn)行布局，我們也可以采用如下幾種方式來進(jìn)行非浮動(dòng)元素的布局。

display: inline-block;

inline-block是將元素設(shè)置為內(nèi)聯(lián)塊級(jí)元素，可以讓元素既能夠像內(nèi)聯(lián)元素一樣在文本流中展示，又能夠像塊級(jí)元素一樣設(shè)置寬高等屬性。例如我們可以使用以下代碼來設(shè)置元素的寬高：

div {
display: inline-block;
width: 100px;
height: 100px;
}

通過這種方式，我們可以實(shí)現(xiàn)非浮動(dòng)的元素布局。

position: absolute;

position:absolute是將元素設(shè)置為絕對(duì)定位，可以讓元素相對(duì)于其父級(jí)元素進(jìn)行移動(dòng)，可以使用top、left等屬性來控制位置。例如：

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

通過這種方式，我們可以實(shí)現(xiàn)元素的準(zhǔn)確定位。

display: flex;

display:flex是一種彈性盒模型，可以讓元素相對(duì)于其父級(jí)元素進(jìn)行排列。例如：

.parent {
display: flex;
justify-content: center;
align-items: center;
}

通過這種方式，我們可以實(shí)現(xiàn)元素的垂直水平居中對(duì)齊。

通過上述幾種方式，我們可以實(shí)現(xiàn)非浮動(dòng)元素的布局，讓網(wǎng)頁的排版更加靈活多樣。