[分享]css中div左浮动跑到右边

CSS中，我们可以通过左浮动（float:left）使一个div元素向左移动，并使其它元素环绕它。而有时候我们会发现当多个div元素左浮动后，它们会出现违反预期的状态：本来应该在左边的div元素跑到了...

CSS中，我们可以通过左浮动（float:left）使一个div元素向左移动，并使其它元素环绕它。而有时候我们会发现当多个div元素左浮动后，它们会出现违反预期的状态：本来应该在左边的div元素跑到了右边。

这是因为在html文件中，div元素的位置是按照先后顺序排列的，而在CSS中，浮动元素是按照位置从上往下逐个布局的。当div1和div2分别浮动到左边时，如果div2比div1先出现在html文件中，那么div2就会在div1的左边。

 <div style="float: left;">我是div1</div>
  <div style="float: left;">我是div2</div> 

上述代码中，本来div1应该在div2的左边，但因为div2先出现在html文件中，所以实际上div1会跑到div2的右边。

为了避免这种情况的发生，我们可以设置clear:left或者clear:both来清除浮动。clear:left的含义是清除左侧浮动，而clear:both则是同时清除左侧和右侧浮动。

 <div style="float: left;">我是div1</div>
  <div style="float: left;">我是div2</div>
  <div style="clear: left;"></div> 

上述代码中，我们在两个div元素下面增加了一个空的div元素，它的clear:left会清除div1左侧的浮动。这样就可以避免div1跑到div2的右边了。

总之，当我们使用CSS中的浮动布局时，一定要注意各个元素的先后顺序，以及是否需要清除浮动。