css中怎么缩小浮动间距

在网页布局中，经常会使用float浮动来实现元素的排列，但是默认情况下，每个浮动元素之间都会有一定的间距，这对于要求相邻元素贴紧排列的情况就不太适合了。下面就介绍一些常用的方法来缩小浮动元素之间的间距。

1. 使用负margin值

 .float-item {
    float: left;
    margin-right: 10px;
  }
  
  .float-item:last-child {
    margin-right: -10px;
  } 

在浮动元素的样式中，设置正常的margin间距，然后给最后一个浮动元素设置一个负的margin-right值，来抵消前面浮动元素的margin-right。如上述代码，最后一个元素的margin-right为-10px，与前面所有元素加起来的margin-right值正好相等，使得元素贴紧排列。

2. 使用flex布局

 .float-container {
    display: flex;
  }
  
  .float-item {
    flex: 1;
    margin-right: 10px;
  }
  
  .float-item:last-child {
    margin-right: 0;
  } 

使用flex布局可以实现自适应宽度和间距相等的效果。在容器的样式中设置display:flex，然后将每个浮动元素的flex值设置为1，这样它们就会平分容器的宽度，并将间距设置为相等的10px。最后一个浮动元素的margin-right设置为0，以避免冗余的间距。

3. 使用calc函数

 .float-item {
    float: left;
    width: calc(33.33% - 10px);
    margin-right: 10px;
  }
  
  .float-item:last-child {
    margin-right: 0;
  } 

使用calc函数可以计算出元素的宽度，包括间距。如上述代码，每个浮动元素的宽度都是它们所在容器的1/3减去10px的间距，这样它们就可以完美排列，并占满整个容器的宽度。同样，最后一个浮动元素的margin-right设置为0，以避免冗余的间距。

以上三种方法，可以根据实际情况选择使用。它们可以缩小浮动元素间距，实现紧凑的布局效果。