在页面布局中,经常会用到浮动元素。但是有时候我们会遇到一种情况:两个浮动元素不能在同一排。下面我们来探讨一下这个问题。首先,我们来看一个例子:<div class= box &g
在页面布局中,经常会用到浮动元素。但是有时候我们会遇到一种情况:两个浮动元素不能在同一排。下面我们来探讨一下这个问题。
首先,我们来看一个例子:
<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属性就可以解决问题了。
粉丝
0
关注
0
收藏
0