HTML5+CSS设置浮动却没有动反而在中间且错行的问题

遇到“HTML5+CSS设置浮动却没有动反而在中间且错行的问题”这个问题时，一般情况下可能有以下几种原因：

1. CSS中的宽度设置错误；
2. 元素间的间距没有正确设置；
3. CSS中的浮动设置错误。

接下来我们详细讲解如何排查和解决这些问题：

问题排查

问题一：CSS中的宽度设置错误

如果设置了元素的宽度，并且元素的总宽度（包含padding和border）大于了其父元素的宽度，则会出现元素在中间并且错行的问题。因此，可以通过检查CSS中元素的宽度设置是否正确来排查问题。

问题二：元素间的间距没有正确设置

如果CSS中未正确设置元素间的间距，可能会造成元素错行的问题。检查CSS中的margin和padding设置是否正确可以很好地解决这个问题。

问题三：CSS中的浮动设置错误

如果CSS中的浮动设置错误，可能会造成元素在中间并且错行的问题。因此，在排查问题时应该检查CSS中的浮动设置是否正确。

解决方案

方案一：检查CSS中的元素宽度设置

如果元素的宽度设置不正确，则可能会超出其父元素的宽度。在此情况下，可以通过调整CSS中元素的宽度来解决问题。

/* 设置宽度为100% */
width: 100%;

方案二：检查元素间的间距设置

如果CSS中的间距设置不正确，则可能会造成元素间距不均，从而产生错行的现象。在此情况下，可以通过调整CSS中元素的间距来解决问题。

/* 设置margin和padding */
margin-top: 10px;
padding-left: 5px;

方案三：检查CSS中的浮动设置

如果CSS中的浮动设置不正确，则可能会导致元素在中间并且错行的问题。在此情况下，可以通过检查CSS中浮动的设置来解决问题。

/* 设置左浮动 */
float: left;

示例说明

下面我们给出两个示例，帮助读者更好地理解问题排查和解决方案。

示例一：检查CSS中的元素宽度设置

<div class="container">
  <div class="box1">...</div>
  <div class="box2">...</div>
  <div class="box3">...</div>
</div>

.container {
  width: 80%; 
}
.box1 {
  width: 30%;
  float: left;
  margin-right: 5%; 
}
.box2 {
  width: 70%;
  float: right; 
}
.box3 {
  width: 50%; 
  margin-top: 20px; 
}

在此示例中，.box1的宽度为30%，而其次级IE51中padding和border的宽度为5%，因此其总宽度为40%，可能会超出其父元素 .container的宽度（80%），导致错行的现象。解决方法是调整 .box1 的宽度，让其不超过其父元素宽度的80%即可：

.box1 {
  width: 25%;
  float: left;
  margin-right: 5%; 
}

示例二：检查CSS中的浮动设置

<div class="container">
  <div class="box1">...</div>
  <div class="box2">...</div>
  <div class="box3">...</div>
</div>

.container {
  width: 80%; 
}
.box1 {
  float: left;
  width: 30%; 
}
.box2 {
  float: right;
  margin-left: 5%; 
  width: 60%; 
}
.box3 {
  width: 50%; 
  margin-top: 20px; 
}

在此示例中，.box1在左侧浮动，而.box2在右侧浮动。但是，当浮动的元素的总宽度大于父元素的宽度时，其可能会在中间，并且错行，这就是本示例中出现的现象。解决方法是调整.box2的宽度或者调整.container的宽度。在这里，为了解决问题，我们采用第一种方案：

.box2 {
  float: right;
  margin-left: 5%; 
  width: 30%; 
}