首页 > 清除浮动 高度变高

清除浮动 高度变高

两列布局 左侧固定,右侧自适应实现过程中,右侧内容区使用通用的清除浮动方法,导致使用.clearfix的容器高度变高,好像是受左侧浮动影响,具体原因未知,求解答。

代码测试链接地址

我给该 ul 加上了.clearfix属性,之后该ul高度就变这么高了,至于为什么此处使用该class,因为此处仅仅是用来还原BUG之用。


看了下demo, 问题根源是因为你在ul上加了clearfix,而cleafix:before的display设置的是table,所以ul的高度不准确了,至于原理,我也得需要进一步查下资料


什么原因不知道,通常我遇到都是添加个overflow: hidden;


对于第一种布局,我能想到的解决方案是: 右侧内容区父元素 div.right-content 添加overflow: auto; 以此来屏蔽掉左侧浮动的影响。 右侧内容区内部容器 不会设置宽度,一般情况下不会受影响。

PS: 目前项目变更了样式,左侧可以采取position:absolute;方式可以满足需求,故而左侧修改为绝对定位了,也就不存在浮动导致右侧内容使用.cl时 因为内容不能与float在一行,导致高度变高的问题。


。。。一开始还以为真的是BUG,好兴奋地看,最后发现是border的问题。。。


用overflow hidden来清除浮动,并形成新的bfc就不会受到左边的浮动高度的影响,右边的高度就是ul里面所占内容的高度。另外关于两列自适应布局 你可以看看这个demo

【热门文章】
【热门文章】