欢迎访问畅维网络官网,我们将为您提供专业的网站建设服务!
咨询电话:0531-88162305 QQ:点击这里给我发消息
当前位置:首页 > 网站学院 > 网站技术

济南网站建设:层内浮动溢出的探讨

话说学习前端总是不够踏实是不行的,如果需要真正把这门技术做好,需要静心去研究看似简单的东西。


前言:float是结构的破坏之王,由于它会衍生出许多问题。Float浮动溢出的问题,应该每个做前端的都会遇到。我也多次遇到,虽然都解决了,但始终有些迁就不完美的地方。在这里做一些探讨,而非总结。


认识Float


float很有用,比如说用它让文字围绕图片,但是用它来实现网页布局时,绝对是一个自私混球,因为它总是影响别人。所有很多搞前端的人说过:float的本职工作就是实现文字环绕图片,其他的都不是它的工作,用float做网页布局只能是搬起石头在自己的脚。但是,float已经被滥用了,不该用也用了,自然产生了问题,本文讨论的“层内浮动溢出”的问题,就是这样的一个问题,还是要解决的,有助于我们更好地理解float这个东西。


层内浮动溢出的原因


刚才说了,层内浮动溢出的问题就是float的问题,当一个元素使用了float之后,不管向左还是向右,它的高度都会塌陷,如果父元素中没有其他元素,只有浮动元素而且没有设定height,那么高度100%是0。也就会出现父元素包不住子元素的情况,即是层内浮动元素溢出,这对于一个页面布局来说是一个硬伤,肯定要打补丁解决的。


浮动溢出解决方法


1、不使用float


不使用float来实现网页布局,让float回归它被创造之初赋予的本职工作。那么可以使用什么来代替float方案。我想到的有两个:


(1)使用table来布局,虽说table布局已经被逐步淘汰,但是讲究语义化的今天,该用table的时候还是要用的,table的兼容性和稳固性也是相当的好。


(2)使用inline-block列表布局


2、使用float,但是要清除浮动


参考了一下,最新的前端框架bootstarp,它的清除浮动的写法是这样的:


.clearfix {
 *zoom: 1;
}

.clearfix:before,.clearfix:after {

display: table;
 line-height: 0;
 content: "";
}

.clearfix:after {
 clear: both;
}


可以给父元素添加一个class=”clearfix”,也可以在浮动元素后面加一个空的div并且添加一个class=”clearfix”(注意:这种方法出一个空格就有可能产生一大段空白)。


笔者在实践中,大部分的时候没有问题,但是清除浮动后出现过大段的空白,去掉clear: both后,就正常了,表示无解,还有待解决。


 


原文链接:http://www.tedlife.com/float_discussion.html

鲁公网安备 37010502000788号

  • 扫一扫,关注微信公众号