[分享]css两个浮动不能在同一排

在页面布局中，经常会用到浮动元素。但是有时候我们会遇到一种情况：两个浮动元素不能在同一排。下面我们来探讨一下这个问题。首先，我们来看一个例子： .box { width: 400px; heig...

在页面布局中，经常会用到浮动元素。但是有时候我们会遇到一种情况：两个浮动元素不能在同一排。下面我们来探讨一下这个问题。

首先，我们来看一个例子：

<div class="box">
  <div class="left"></div>
  <div class="right"></div>
</div> 

.box {
  width: 400px;
  height: 200px;
  border: 1px solid #000;
}

.left {
  float: left;
  width: 200px;
  height: 100px;
  background-color: red;
}

.right {
  float: left;
  width: 200px;
  height: 100px;
  background-color: blue;
} 

在上述代码中，我们定义了一个大小为400x200的块级元素.box，并在其中放置了两个大小为200x100的浮动元素.left和.right。按照理论上来说，这样两个浮动元素应该排成一排，但实际运行的效果却是这样的：

为什么会出现这种情况呢？这是因为浮动元素会“贴着”其他元素排列，如果一个浮动元素与另一个元素重叠在一起，就会出现上述问题。

解决这个问题的方法比较简单，我们可以给第二个浮动元素（即.right）添加一个clear属性：

.right {
  float: left;
  width: 200px;
  height: 100px;
  background-color: blue;
  clear: left;
} 

这里我们给.right添加了一个clear:left属性，这样就能保证两个浮动元素不会重叠在一起了。现在我们再来看一下效果：

可以看到，两个浮动元素已经分别排列在了两行中。

总之，遇到两个浮动元素不能在同一排的情况，我们只需要给第二个浮动元素添加一个clear属性就可以解决问题了。