如何监测float元素是否会被挤到下一行?
在现代web前端的layout技术中，flex布局已经得到非常广泛的应用。但是由于flex本身比较复杂，虽然功能强大，但是要彻底掌握并不是那么容易的事情，另外，对于兼容性要求比较高的网页设计场景，flex可能并不是最好的方案。而float浮动的layout布局方案，几乎所有主流浏览器都支持，因此兼容性就不存在任何问题，并且float布局简单有效，因而即便在当下，float布局模式也是一个非常常用的布局方式。我在开发IT宝贝网时，利用这个float布局设计了主页的layout，但是其中遇到一个问题：就是在不同的屏幕大小时，float元素可能会由于window的宽度不够从而导致float的导航菜单被挤到下一行，具体如下图所示，这个是非常不爽的。 
解决该问题的思路：希望能够监测到导航栏被挤下的状态，这时我们就应该把这个导航栏隐藏起来，并且使用一个导航按钮，点击以后就可以叫出导航栏，而导航栏将以块block模式展示，这一方案实际上也是网页wap版本的通用解决方案。但是问题的核心来了，如何能够监测到导航栏无法容纳在父元素盒子里面呢？
看看以下简化问题后的代码演示实例:
代码秀占位符