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中的浮动布局时,一定要注意各个元素的先后顺序,以及是否需要清除浮动。