84669인 학습
152542인 학습
20005인 학습
5487인 학습
7821인 학습
359900인 학습
3350인 학습
180660인 학습
48569인 학습
18603인 학습
40936인 학습
1549인 학습
1183인 학습
32909인 학습
两列布局 左侧固定,右侧自适应实现过程中,右侧内容区使用通用的清除浮动方法,导致使用.clearfix的容器高度变高,好像是受左侧浮动影响,具体原因未知,求解答。
代码测试链接地址
我给该 ul 加上了.clearfix属性,之后该ul高度就变这么高了,至于为什么此处使用该class,因为此处仅仅是用来还原BUG之用。
认证高级PHP讲师
用overflow hidden来清除浮动,并形成新的bfc就不会受到左边的浮动高度的影响,右边的高度就是ul里面所占内容的高度。另外关于两列自适应布局 你可以看看这个demo
看了下demo, 问题根源是因为你在ul上加了clearfix,而cleafix:before的display设置的是table,所以ul的高度不准确了,至于原理,我也得需要进一步查下资料
什么原因不知道,通常我遇到都是添加个overflow: hidden;
。。。一开始还以为真的是BUG,好兴奋地看,最后发现是border的问题。。。
对于第一种布局,我能想到的解决方案是: 右侧内容区父元素 p.right-content 添加overflow: auto; 以此来屏蔽掉左侧浮动的影响。 右侧内容区内部容器 不会设置宽度,一般情况下不会受影响。
PS: 目前项目变更了样式,左侧可以采取position:absolute;方式可以满足需求,故而左侧修改为绝对定位了,也就不存在浮动导致右侧内容使用.cl时 因为内容不能与float在一行,导致高度变高的问题。
用overflow hidden来清除浮动,并形成新的bfc就不会受到左边的浮动高度的影响,右边的高度就是ul里面所占内容的高度。另外关于两列自适应布局 你可以看看这个demo
看了下demo, 问题根源是因为你在ul上加了clearfix,而cleafix:before的display设置的是table,所以ul的高度不准确了,至于原理,我也得需要进一步查下资料
什么原因不知道,通常我遇到都是添加个overflow: hidden;
。。。一开始还以为真的是BUG,好兴奋地看,最后发现是border的问题。。。
对于第一种布局,我能想到的解决方案是: 右侧内容区父元素 p.right-content 添加overflow: auto; 以此来屏蔽掉左侧浮动的影响。 右侧内容区内部容器 不会设置宽度,一般情况下不会受影响。
PS: 目前项目变更了样式,左侧可以采取position:absolute;方式可以满足需求,故而左侧修改为绝对定位了,也就不存在浮动导致右侧内容使用.cl时 因为内容不能与float在一行,导致高度变高的问题。