关于布局中float的常见问题及解决办法

原创
2016/10/19 11:42
阅读数 36

在网页的布局中,我们经常要使用到float在进行元素的排版,那么随之而来的就是许多的问题,个人在开发过程中最常见的问题主要就是两种,一种是元素的浮动导致的布局混乱的问题,另一种是浮动后的盒子模型塌陷问题。

首先,要了解浮动就要先了解网页布局的原理。个人认为,网页在布局的过程中你可以把它看成是一个三维立体的空间,常规流元素因为重力的原因是在最底层依次按顺序往下排,而absolute和float元素这些不占用常规流的元素是脱离了重力漂浮在空中,但是它还是属于包含着它的盒子元素的。

那么了解原理后其实两个问题就可以一起解释了。

元素浮动后,他失去了重力,同时它在地上的位置也没有东西了,那么父级元素就会认为这里没有元素,而后面的元素也会挤过来,所以就会出现了我们在平时布局中碰到的两种问题了,父级被挤压,而后面的元素有一部分出现在了float元素本来的位置。既然我们已经知道了问题的所在,那么解决问题的方法其实也是很简单的,就是告诉父级元素和后面的元素,我虽然浮起来了,但是这块地还是我的,你们不能占用。

1、overflow方法,给父级元素一个overflow:hidden,设置高度值为auto,在没有明确高度限制的情况下,那么父级元素在隐藏超出他的元素是就会把浮动元素考虑在内,这样就防止了盒子模型的塌陷,同时,既然盒子不塌陷了,那么后续的元素就不能过来占用float原本的位置,顺便达成了清除浮动的目的,但是在实际的清除浮动过程中overflow这种方法会出现许多不可预知的问题,所以不建议使用overflow清除浮动。附上官方对于overflow解决盒子塌陷问题的解释:

因为overflow.hidden会触发BFC。BFC 全称是块级排版上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但是如果一个块级元素 设置了float:left,overflow:hidden或position:absolute样式,就会为这个块级元素生成一个独立的块圾上下文,就像在window全局作用域内,声明了一个function就会生成 一个独立的作用域一样,新开僻的BFC像是开僻了一个新的小宇宙,使这个块圾元素内部的排版完全独立隔绝。独立的块级上下文可以包裹浮动流,全部浮动子元素也不会引起容器高度塌陷,也就是说包含块会把浮动元素的高度也计算在内,所以不用清除浮动来撑起高度。

2、clearfix方法,这种方法在实际的使用过程中使用的比较广泛,网上的将解析也比较全,这种方法的原理我认为是使用clearfix后告诉后面的元素,前面的元素是浮动的,他们的位置是不能占用的。当然这种方法在使用过程中要注意clearfix添加的位置。clearfix是加在浮动元素的父级的class中,但是有时候会因为某些未知的原因失效,此时,只需要一个空标签(p、div这些都可以)设置class为clearfix并且放在浮动元素的父级元素和下一站元素的中间即可,这也算是第三种方法的一个改进吧。

3、clear:both方法,其实就是第二种方法中使用空标签的时候换一个class,而这个class中只需要一句话clear:both即可,不过在实际工作中我喜欢使用第二种里面的空标签方法多一点。

附:.clearfix:after { 
    content:""; 
    display:block; 
    height:0; 
    clear:both; 

.clearfix {*zoom:1;}//兼容ie

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部