解决浮动导致的内容溢出

来源:luqidong 发布时间:2014-01-22 19:40:56 点击数:

  从技术角度将,float属性并不是用来布局的,css引入浮动的本意是让文本能够环绕在其中内嵌的其他元素周围,而绝不是为了页面布局。但即便如此,我们也不得不继续使用浮动,原因很简单--其他任何方法都没有清除(clear)功能,我们别无选择。

 

  以最简单的方式描述,clear属性及clear的含义可以被理解为让某一元素不再跟随在另一元素的后面,大多数情况想ia,绝对定位导致的内容溢出都源于该方案缺少了这种“清除跟随”的功能。

 

   用标签清除浮动

78OA办公系统

  若要在布局中使用浮动,则html中至少有2个元素,一个应用浮动,另一个则用来清除浮动。例如,页面可能有2个div分别浮动在左右两侧这时我们还必须要引用第三个元素来清除浮动。我们可以用现有的元素顺便请、清除浮动,例如用紧跟随其后的p元素清除前面的h3元素的浮动属性。

 

  但是有时我们却不得不额外引入另一个罪恶的空元素来完成清除浮动的重任。若这种情况的确无法避免,我们推荐使用全能的div元素,类似如下代码

 

  <div class="clear"></div>

 

   在该CSS class中即可定义clear属性,虽然在htm中添加这个无意义定义的标签似乎有点丑陋,但是我们已经尽力了。

本文由www.78oa.com原创,转载请注明出处。