[分享]css不浮动占满剩余宽度

在CSS中，浮动（float）是一个非常有用的属性，它使我们能够将元素从文档的正常流中移动，并且让它们靠左或靠右对齐。但是，如果我们想要一个元素占据剩余宽度而不浮动，该怎么办呢？.container ...

在CSS中，浮动（float）是一个非常有用的属性，它使我们能够将元素从文档的正常流中移动，并且让它们靠左或靠右对齐。但是，如果我们想要一个元素占据剩余宽度而不浮动，该怎么办呢？

.container {
  display: flex;
}

.box {
  flex: 1;
  /* 不浮动也能占满剩余宽度 */
} 

解决这个问题的办法是使用Flexbox布局，它提供了一种简单而有用的方式来管理元素在容器中的位置和大小。我们可以使用display属性的flex值来创建一个Flex容器，并使用flex属性来设置元素的大小，切掉浮动，不浮动也能占满剩余宽度。

另外，如果你要兼容一些老的浏览器，你可以使用另外一种方式：

.container {
  display: table;
  /* 容器要设置宽度 */
  width: 100%;
}

.box {
  display: table-cell;
  /* 不浮动也能占满剩余宽度 */
} 

这种方法是使用table和table-cell样式来实现的，但需要注意的是，如果不设置容器的宽度，这种方法将不起作用。

总之，使用Flexbox布局或table和table-cell样式都可以解决不浮动占满剩余宽度的问题，具体方法根据实际情况选择即可。