84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
两列布局 左侧固定，右侧自适应实现过程中，右侧内容区使用通用的清除浮动方法，导致使用.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在一行，导致高度变高的问题。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
用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在一行，导致高度变高的问题。