[分享]css中float下降后对不齐

在CSS中，float属性经常被用来实现页面布局。然而，当元素下降后，可能会出现一些对不齐的问题。下面我们来看看float下降后的对不齐问题。.floated { float: left; width...

在CSS中，float属性经常被用来实现页面布局。然而，当元素下降后，可能会出现一些对不齐的问题。下面我们来看看float下降后的对不齐问题。

.floated {
  float: left;
  width: 50%;
}

.clear {
  clear: both;
} 

在上面的代码中，我定义了一个class为“floated”的元素，它其实就是我们通常使用float属性的浮动元素。同时，我也定义了一个class为“clear”的元素，来清除浮动，以免出现其他不必要的影响。

然而，在实际的应用中，我们可能会遇到下列的问题：

1. 当浮动元素块与一个具有较大margin-top的非浮动元素块相邻时，浮动元素块在下降时会与非浮动元素块发生碰撞，导致对不齐问题。
2. 当两个浮动元素块相邻时，第二个浮动元素块下降时，会发生与前一个浮动元素块重叠的问题，也同样导致对不齐问题。

那么，如何解决这些问题呢？

对于问题1，我们可以在浮动元素块之前添加一个空的

<div style="clear:both;margin-top:-10px;"><br />
  <!--这个div用于解决问题1--><br />
</div><br />
<div class="floated"> </div> 

<div class="clear"> </div><br />
<div class="floated"> </div>