css不浮动怎么写

在网页设计中，CSS样式是不可或缺的一部分。而浮动是CSS的一个重要属性之一，它可以让元素脱离文档流，使多个元素排列在同一行或同一列。但是，有时候我们并不需要使用浮动，该怎么写呢？

/* 例如，我们想要将两个div元素放在同一行，但不使用浮动 */
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

/*我们可以使用display: inline-block属性 */
.container {
  font-size: 0;
  /* 解决inline-block元素默认会有一些间距的问题 */
}
.box {
  display: inline-block;
  width: 50%;
  height: 100px;
  background: #ccc;
} 

由于inline-block元素默认会有一些间距，我们可以通过设置父元素font-size: 0;来解决这个问题。

另外，有时候我们需要让元素水平居中，也不一定非要使用浮动。我们可以使用text-align: center;属性来实现。例如：

<div class="container">
  <div class="box"></div>
</div>

.container {
  text-align: center;
}
.box {
  width: 100px;
  height: 100px;
  background: #ccc;
  display: inline-block;
  /* 给元素设置display: inline-block;是为了让它能够被text-align: center;水平居中 */
} 

以上两个实例演示了在不使用浮动的情况下，如何实现元素排列和水平居中。我们可以根据具体情况选择不同的CSS属性来实现布局效果。