前端 - 清除浮动 高度变高

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在一行，導致高度變高的問題。