在HTML中，元素默认是按照文档流顺序排列的，也就是说，元素会一个接一个地水平排列，直到没有足够的空间，然后换行到下一行，这种布局方式被称为“流式布局”，有时候我们需要让元素不按照流式布局排列，而是按照特定的方式进行排列，这时候我们就需要使用一些非流式布局的方法。
1、绝对定位（Absolute Positioning）
绝对定位是一种让元素脱离文档流的方式，通过指定元素相对于其最近的已定位（非static）祖先元素的位置来实现，如果没有这样的祖先元素，则相对于初始包含块（通常是HTML文档的<html>元素）定位，绝对定位的元素不会占据原来的空间，其他元素会表现得像它不存在一样。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.absolute {
position: absolute;
top: 20px;
left: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="absolute">我被绝对定位了！</div>
<p>这是一个段落，我不会被上面的绝对定位元素所影响。</p>
</div>
</body>
</html>
2、浮动（Float）
浮动是另一种让元素不按照流式布局排列的方法，通过将元素向左（left）或向右（right）浮动，可以使元素沿着其父元素的左侧或右侧边缘排列，浮动的元素仍然占据原来的空间，但文本和其他元素会环绕在它周围。
<!DOCTYPE html>
<html>
<head>
<style>
.float {
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="float">我被浮动了！</div>
<p>这是一个段落，我会环绕在浮动元素的周围。</p>
</body>
</html>
3、弹性盒子（Flexible Box）
弹性盒子布局是一种CSS3布局方式，可以让子元素在容器内以弹性的方式排列，弹性盒子容器内的子元素可以水平或垂直排列，并且可以根据需要伸展或收缩。
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
</head>
<body>
<div class="flex-container">
<div>第一个子元素</div>
<div>第二个子元素</div>
<div>第三个子元素</div>
</div>
</body>
</html>
4、网格布局（Grid Layout）
网格布局是另一种CSS3布局方式，允许将容器划分为行和列，创建一个网格，子元素可以放置在网格的特定位置，并可以根据需要调整大小。
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
}
</style>
</head>
<body>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
要在HTML中实现不平铺的布局，可以使用绝对定位、浮动、弹性盒子和网格布局等方法，这些方法可以让元素按照特定的方式排列，而不是简单地按照流式布局排列，通过灵活运用这些布局方式，可以实现更丰富和灵活的页面设计。