浮动出现双边距的问题，如何解决？

浮动元素出现双边距的问题是由于浮动元素会生成一个块级框，而浮动元素的外边距会和相邻元素的外边距重叠造成的。可以通过以下方法解决浮动元素双边距问题：

1. 清除浮动：在浮动元素的父容器中添加一个clearfix类，通过设置clearfix类的伪元素::after清除浮动。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

1. 使用浮动布局的父容器添加内边距：在浮动元素的父容器中添加一个左或右内边距，防止边距重叠。

.parent {
  padding-left: 1px; /* 或者 padding-right: 1px; */
}

1. 使用display: inline-block替代浮动：将浮动元素的display属性设置为inline-block，可以避免边距重叠问题。

.float-element {
  display: inline-block;
}

1. 使用flexbox布局：使用flexbox布局可以避免边距重叠问题。

.parent {
  display: flex;
}

以上方法都可以解决浮动元素双边距问题，具体使用哪种方法取决于具体的布局需求和浏览器兼容性要求。