请问5.1清除浮动章节内容中的浮动问题
老师你好，我想问下本节视频中老师讲的当div2,div3都是left浮动，div4不浮动时，法一在div4中清除浮动，法二单独设置classdiv清除浮动，法三在单独设置classdiv中添加伪元素清除浮动三种方法的父div1高度为div3+div4的高度。而我给div4设置为left浮动，其他不变时,法一父div1高度崩塌，法二法三父div1高度都为div3的高度，不明白为什么会出现不同，我的理解：一、关于老师讲的，三种方法的父div1高度为div3+div4的高度是因为div4是标准文档并用clear属性中的both值使div4左右没有浮动元素，所以div4没被div2和div3覆盖独占一行，同时因为div4在div2和div3下方，所以父div1高度才被迫是div4的高度加上div3的高度吧(div3的高度是虚充？若浮动层在下方，标准文档在上方，父div高度就是标准文档的高度吧。。。)。二、关于我修改div4为left浮动(修改div4为浮动为了测试下方没有标准文档的支撑父div1的高度会怎样)，三种方法都是both值将div4移到下方，div2、div3、div4都是left浮动，那么三种方法应该都是父div1高度崩塌，为什么法二和法三还会有div3的高度？
正在回答
1、同学理解的没错
2、同学可能对clear：both，以及clear：left和clear：rigth 有所误解。
clear：both 是清除设置这个clear：both元素前边的浮动影响，
如对clearDiv设置clear：both，则它会对div3无论是左浮动，还是右浮动，都起作用。如果设置的是clear：left ，则只有在div3设置的是左浮动时起作用，如果设置的clear：rigth 则只对 div3设置右浮动时起作用。
它对div4没有清除浮动的作用。
3、综上所述，当第一种方法时，由于div4浮动起来了，它本身和div2 div3时一样了，虽然清除了div3的浮动，但div4也浮动了，导致了父元素的塌陷，如第一问中同学理解的那样，没有一个正常的标准文档流，它还是没办法撑起父元素的高度，所以div1 塌陷了。而第二三种方法，它只是对div3 起了清除浮动的作用，对div4是否浮动起来，它已经不管了，与方法一不同的是，我们有clearDiv这个正常的文档流，虽然它的高度为0，但却也是个正常的文档流，实际上是clearDiv与div3的高度撑起了父元素的高度，因为clearDiv高度是0。所以，变成了div3的高度。
如果我的回答解决了你的疑问，请采纳，祝学习愉快。
1、关于：“一、关于老师讲的，三种方法的父div1高度为div3+div4的高度是因为div4是标准文档并用clear属性中的both值使div4左右没有浮动元素，所以div4没被div2和div3覆盖独占一行，同时因为div4在div2和div3下方，所以父div1高度才被迫是div4的高度加上div3的高度吧 ”
是的：
同学理解的没错
并且关于同学的“div3的高度是虚充？若浮动层在下方，标准文档在上方，父div高度就是标准文档的高度吧。。。”这句话，老师没有看懂同学的意思
2、关于我修改div4为left浮动(修改div4为浮动为了测试下方没有标准文档的支撑父div1的高度会怎样)，三种方法都是both值将div4移到下方，div2、div3、div4都是left浮动，那么三种方法应该都是父div1高度崩塌，为什么法二和法三还会有div3的高度？
因为clear: both; 只能对它前边的元素起作用，没有办法对<div id="clearDiv"></div> 后边的元素起作用。例如，div和它换换地方，则：
第三种方法只是对第二种方法的升级。也是同理。
3、建议同学下次提问可以分条提问，都写在一起的话，老师担心会漏答同学的问题。
可以通过换行以及结合代码，这样老师更容易理解同学的问题。
如果我的回答解决了你的疑问，请采纳。祝学习愉快。
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星