本文主要是介绍DIV+CSS clear:both清除产生浮动后，会在div上方产生空隙的问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
时间：2019年6月26日16:12:53
我们知道有时使用了css float浮动会产生css浮动，这个时候就需要清理清除浮动，我们就用clear样式属性即可实现。
但是在使用了clear:both清除产生的浮动后，往往会在这个应用了clear:both的div的上方出现一个白色空隙。
解决办法是在这个div的上方的div加上overflow:hidden;
<div class="a hid"><div class="bms_2_1_1 fl">~漂洋过海来看你，</div><div class="bms_2_1_2 fl"><img src="__STATIC__/images/male.png" width="18" height="18"/></div></div><div class="b cle hid">北京</div>
样式说明：
.cle{clear:both;}
.hid{overflow:hidden;}
.fl{ float:left;}
.fr{ float:right;}
这是这几天解决clear:both所产生div空隙的办法。
为什么要在div中使用clear:both？主要是因为div b中的文字即使在css中设置了text-align:left; 文字也无法居左，所以这种情况下使用了clear:both。
几个问题：
（1）为什么div中文字的text-align:left;无效？
（2）为什么text-align:left;无效的情况下，使用clear:both可以解决？
（3）为什么使用clear:both会产生空隙？
（4）为什么在上方的同级div中，使用overflow:hidden;会解决下方出现的空隙问题？
以上这些问题，以后有机会再具体研究一下吧。
总结：
当div应用clear:both 产生空隙后，需要在其上方的同级div加上overflow:hidden;，即可消除空隙。
这篇关于DIV+CSS clear:both清除产生浮动后，会在div上方产生空隙的问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
