对于CSS中的左浮动,很多人可能都遇到过这样的问题,就是在一些情况下会发生挤不上去的现象。 .left { float: left; width: 50%; height: 100px; backgr
对于CSS中的左浮动,很多人可能都遇到过这样的问题,就是在一些情况下会发生挤不上去的现象。
.left { float: left; width: 50%; height: 100px; background-color: red; } .right { float: left; width: 50%; height: 150px; background-color: blue; }
以上是一段典型的左浮动代码,我们设置了两个块元素,一个宽度为50%的红色区块和一个宽度也为50%的蓝色区块。在正常情况下,这两个区块应该是并排显示的。
但是,如果我们加上以下的样式:
body { font-size: 0; }
在设置了字体大小为0之后,再进行对浮动元素的排列,我们就会发现,原本应该挨在一起的两个元素出现了间隔。
这是因为,因为浮动元素是行内元素,最终的渲染结果是依据字符间的间隔来计算的,而在这个情况下,字体大小为0会让字符之间的间隔被去掉,所以两个块元素之前的间距也会被去掉,从而产生上述现象。
解决这个问题的方法有很多,比较简单的一种是在两个浮动元素之间添加一个空标签,例如:
<div class="left"></div> <div class="right"></div> <div style="clear: both;"></div>
在两个块元素之间添加一个高度为0,清除浮动的空标签即可。
总的来说,这个问题的解决方法相比其他问题还是比较简单的,只需要加上一个空标签就能很好地解决,所以我们在编写代码时一定要注意这个问题,避免在排版时出现不必要的错误。
粉丝
0
关注
0
收藏
0