css如何清除float浮动

想必很多小伙伴在开始学习css 浮动的时候，都遇过浮动无法闭合的坎，导致页面布局总是有问题，现在小编就总结了几个小方法，分享给新入门的小伙伴，希望能对小伙伴有所帮助~

工具/原料

浏览器

编辑器

发现问题

1、小编的代码如下所示，有一个左浮动div和一个右浮动div，下面还有一个p标签；小编是想p标签文字完整展示在两个漂浮框的下面；

2、看下浏览器预览情况，发现浮动没有闭合的时候会出现部分文字会被挤压在中间空隙中，无法一行显示，如图所示

解决问题

1、用overflow:hidden方法可以在两个浮动div外面加个容器，然后加上overflow:hidden 方法即可清除浮动；

2、加空div用clear:both方法在两个浮动div下面加个空div，然后给空div加上clear:both 方法亦可清除浮动；

3、外标签加clear:both也可以直接给p标签加上clear:both，这样就可以不需要多余的div；

4、给容器设高度直接给两个浮动块外容器加上高度，这样就能避免底部的文字被挤在中间；但小编不推荐此方法，不得已的时候最好不用此方法；