CSS中文字不参与浮动是一项常识,因为文字在布局上应该是固定而且重要的,不应该随便被浮动影响。下面我们来看一下如何实现这个特性。 .content { overflow: hidden; /* 清除浮
CSS中文字不参与浮动是一项常识,因为文字在布局上应该是固定而且重要的,不应该随便被浮动影响。下面我们来看一下如何实现这个特性。
.content { overflow: hidden; /* 清除浮动 */ } .left { float: left; width: 50%; } .right { float: left; width: 50%; }
以上代码是一个常见的左右两栏布局,其中.left和.right都应该浮动到左侧并且占据一半的宽度,但是文字应该在中间并且不参与浮动。我们可以将文字的父元素设置为overflow:hidden,这样就可以清除浮动的影响。
另外,实现文字不参与浮动的另一种方法是使用clear:both。在.right的结束标签之前,加上一个空div并设置style="clear:both",这样就可以清除右侧浮动对文字的影响。
.content { /* overflow: hidden; 用clear:both取代 */ } .left { float: left; width: 50%; } .right { float: left; width: 50%; clear: both; /* 清除浮动 */ }
以上是关于CSS中文字不参与浮动的两种实现方式,无论是使用overflow:hidden还是clear:both,都可以很好地实现文字不受浮动干扰的效果。
粉丝
0
关注
0
收藏
0