清除浮动的问题

Question

老师请问下在课程6分52秒的时候，footer是因为什么原因导致的和left right出现在了同一行，而在清除浮动后又变正常了呢

Answer 1

双越 2021-09-01 08:15:43

footer 不是在 right 后面。你可以浏览器检查一下

• 提问者 Kywane #1

  是老师，我能看到footer整个容器确实顶到了header的下方，但为什么他的高度会包含进去那个元素呢，为什么不只是自己内容区的高度，而且我以为他的内容部分就是this is footer会被压住，就是同样出现在header的下方

• 提问者 Kywane #2

  奥，老师我好像明白了，因为float最初目的是为了做文字环绕的，所以它会压住标准流的盒子但不能压住里面的文字内容，所以this is footer才会出现在那个位置了对吧

Answer 2

双越 2021-08-31 22:05:44

就是因为 footer 上面的 div 增加了 float 。清除浮动自然就正常了。

• 提问者 Kywane #1

  老师，是这样的，那个container里面的这三个p标签进行浮动以后不是会脱离文档流造成父容器高度坍塌，撑不起盒子影响下面的文档流，那为什么这个footer不会顶到header下面那个位置而是出现在了right元素的后边呢， 我不知道是不是我思考的不对，还麻烦您能不能给详细解答下呀