前端 - 清除浮动 高度变高

Question

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

代码测试链接地址

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

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