清除浮动的作用

来源:4-7 小慕医生项目开发(5)

慕仰5025445

2020-10-28 23:58:47

清除浮动的作用是让下一个元素换行吗(不贴着),清除的作用好像挺多的,但是具体在哪里应用不太明白

写回答

1回答

好帮手慕久久

2020-10-29

同学你好,子元素浮动后,会造成父元素高度塌陷(父元素高度无法被撑开,导致高度为0),从而影响页面布局,所以清除浮动,主要用于解决父元素高度塌陷后带来的页面布局问题,如下:

当left和right没有设置浮动时,页面布局是正常的,two在one下面布局:

http://img.mukewang.com/climg/5f9a268109a79be205170610.jpg

http://img.mukewang.com/climg/5f9a26880934196808560342.jpg

当给left和right设置浮动后,会导致one没有高度,此时two的布局就会出现问题:

http://img.mukewang.com/climg/5f9a26fd0904098707430490.jpg

此时就需要清除浮动带来的这个不利影响:

http://img.mukewang.com/climg/5f9a273909b7964b04080109.jpg

http://img.mukewang.com/climg/5f9a27460992dba913170276.jpg

因此,当设置了浮动后,如果页面布局因此混乱了,那么就需要清除一下浮动,如果设置浮动后,并没有影响页面布局,那么也可以不用清除浮动的影响。

祝学习愉快!

1

0 学习 · 15276 问题

查看课程