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

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

display: inline-block;

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

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

通過這種方式，我們可以實現非浮動的元素布局。

position: absolute;

position:absolute是將元素設置為絕對定位，可以讓元素相對于其父級元素進行移動，可以使用top、left等屬性來控制位置。例如：

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

通過這種方式，我們可以實現元素的準確定位。

display: flex;

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

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

通過這種方式，我們可以實現元素的垂直水平居中對齊。

通過上述幾種方式，我們可以實現非浮動元素的布局，讓網頁的排版更加靈活多樣。