当前位置: 代码迷 >> HTML/CSS >> css-float-浮动,高度有关问题,clear,overflow
  详细解决方案

css-float-浮动,高度有关问题,clear,overflow

热度:826   发布时间:2012-10-29 10:03:53.0
css-float-浮动,高度问题,clear,overflow

解决浮动层没有高度,高度不自动适应的问题?

??? 在容器上添加以下这个 class

view plain copy to clipboard print ?
  1. .clearfix:after?{??
  2. ????content :? "." ;??
  3. ????display :? block ;??
  4. ????height :? 0 ;??
  5. ????clear :? both ;??
  6. ????visibility :? hidden ;??
  7. }??
  8. /*?Hides?from?IE-mac?\*/ ??
  9. *?html?.clearfix?{height :? 1% ;}??
  10. /*?End?hide?from?IE-mac?*/ ??

?

在使用Div+Css布局的时候,Float往往比Position更常用,有以下几个值:left,right,none。

Left:元素会移至父元素中的左侧。

Right:元素会移至父元素中的右侧。

None:元素会显示于它在文档中默认出现的位置。

Float的概念很简单,但是实际使用的时候,浮动溢出的问题却很棘手。所谓“浮动溢出”是指:当容器内有浮动元素的时候,由于浮动元素已经脱离了流,所以容器的高度不能自动伸长以适应浮动元素的高度,使得内容溢出到容器外面。

下面代码演示可以看出浮动溢出的实际情况,为了方便,我给外部容器设置了一个边框:

view plain copy to clipboard print ?
  1. < div ? style = "border:1px?solid?#000000;" ? mce_style = "border:1px?solid?#000000;" > ??
  2. ????< div ? style = "float:?left;" ? mce_style = "float:?left;" > hello,?world. </ div > ??
  3. </ div > ??

?

方法一:W3推荐的解决方法 是在浮动元素的下面使用clear,代码如下:

view plain copy to clipboard print ?
  1. < div ? style = "border:1px?solid?#000000;" ? mce_style = "border:1px?solid?#000000;" > ??
  2. ????< div ? style = "float:?left;" ? mce_style = "float:?left;" > hello,?world. </ div > ??
  3. ????< div ? style = "clear:?both;" ? mce_style = "clear:?both;" > </ div > ??
  4. </ div > ??

虽然这是W3推荐的标准方法,但是在网页里平白无故加入一个空的Div,无论如何都是坏味道。

方法二:有人提出了利用overflow清除浮动的方法,代码如下:

view plain copy to clipboard print ?
  1. <div?style= "border:1px?solid?#000000;?overflow:?auto;?zoom:?1;" ?mce_style= "border:1px?solid?#000000;?overflow:?auto;?zoom:?1;" >??
  2. ????<div?style="float:?left;" ?mce_style= "float:?left;" >hello,?world.</div>??
  3. </div>??

?

或者:

view plain copy to clipboard print ?
  1. < div ? style = "border:1px?solid?#000000;?overflow:?hidden;?zoom:?1;" ? mce_style = "border:1px?solid?#000000;?overflow:?hidden;?zoom:?1;" > ??
  2. ????< div ? style = "float:?left;" ? mce_style = "float:?left;" > hello,?world. </ div > ??
  3. </ div > ??

?

其中的zoom是为了兼容IE。

可惜overflow有时候会引起一些意料之外的麻烦,所以,还是少用为妙。

方法三:利用after伪类清除浮动的方法,代码如下:

view plain copy to clipboard print ?
  1. < mce:style ? type = "text/css" > <!--??
  2. .clearfix:after?{??
  3. ????content:?".";??
  4. ????display:?block;??
  5. ????height:?0;??
  6. ????clear:?both;??
  7. ????visibility:?hidden;??
  8. }??
  9. --> </ mce:style > < style ? type = "text/css" ? mce_bogus = "1" > .clearfix:after?{??
  10. ????content:?".";??
  11. ????display:?block;??
  12. ????height:?0;??
  13. ????clear:?both;??
  14. ????visibility:?hidden;??
  15. }</ style > ??
  16. <!--[if?IE]> ??
  17. < mce:style ? type = "text/css" > <!--??
  18. .clearfix?{??
  19. ????zoom:?1;??
  20. }??
  21. --> </ mce:style > < style ? type = "text/css" ? mce_bogus = "1" > .clearfix?{??
  22. ????zoom:?1;??
  23. }</ style > ??
  24. <![endif]--> ??
  25. ---??
  26. < div ? style = "border:1px?solid?#000000;" ? mce_style = "border:1px?solid?#000000;" ? class = "clearfix" > ??
  27. ????< div ? style = "float:?left;" ? mce_style = "float:?left;" > hello,?world. </ div > ??
  28. </ div > ??

?

其中的<!--[if IE]>...<![endif]-->部分是为了兼容IE

  相关解决方案