老师，什么时候该用清除浮动，什么时候不该用清除浮动？
来源：4-9 小慕医生项目开发（6）
摩苏尔
2020-10-26 19:52:32
# 具体遇到的问题
再写医院新闻和公告部分的时候，为什么前边都不需要清除浮动，就医院公告的列表部分需要清除<li >标签的浮动？
为什么前边的医院新闻部分再写浮动时，即使不清楚浮动都没影响，就医院公告部分的不清楚浮动就会有影响呢？
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
在这里输入代码，可通过选择【代码语言】突出显示
1回答
-
同学你好，解答如下：
当浮动对页面布局产生影响时，就要清除浮动。浮动产生的影响，最常见的就是子元素浮动后，会造成父元素高度塌陷（父元素没有高度），由于父元素没有高度，那么就可能造成父元素下面的内容位置错乱，例如下面的例子：
当parent的子元素没有设置浮动时，other元素的位置是正常的：
当left、right设置浮动后，other的位置就会不正常：
此时就需要清除浮动的影响，如下：
但是，当父元素设置了合适的高度后，就可以不用overflow: hidden;来清除浮动的影响，如下：
此时页面布局和设置了overflow: hidden;的效果是一样的。原因是，由于子元素浮动后，父元素没有高度，从而导致布局错误，只要我们让父元素有了正常的高度，就可以让布局正常；而清除浮动和给父元素设置高度，都可以解决高度问题，因此可以采用这两种方式来让布局正常。
所以医院动态和医院公告区域就没有清除浮动，因为父元素news-and-notice设置了高度。而专家介绍里的ul，由于没有设置高度，所以需要使用overflow: hidden;清除浮动；其他位置同理。
同学按照上面的解释，再理解一下。
祝学习愉快！
1
相似问题