浮动布局

让咱们打开百度首页新闻栏目，咱们会看到这样的页面布局：

这个导航栏看上去是行内元素，由于一个个的导航是排在一行内的
而后咱们检查一下是什么标签构成的

竟然是块级元素li！那它是怎么布局成横着一排的呢？其实有两种方式值得推荐:
第一种是强行把li的display变成inline-block
第二种就是要让元素“ 浮动”起来。

浮动到底是什么意思？
就是正常浏览器渲染规则是块级元素是一个元素占一行，一行一行的向下排。
浮动是在正常渲染的基础上把这个块级元素拿到"更高level"的平面上来

什么？这个图片仍是不直观？那咱们直观的用代码来一会儿:

那么咱们该怎样才能完成想百度新闻页面的相似排版呢？

根据刚刚的代码上面咱们初步的了解了float的语法，下面是更彻底的参考，你们能够试试让大家的div“浮动”起来：

咱们接下来简单的说一下第二种方案：
就是让块级元素变成行内块元素

你们看到了效果却是实现了，可是好像出现了一个bug

咱们是不但愿这个“牙缝”存在的
这是一个因为inline-block出现的渲染问题,解决方案是，在父级元素font-size:0px

问题就解决啦～
这个问题产生的缘由是：

这两段代码里面是有空格的，那咱们把font-size给去掉而且把子元素的代码空隙给去掉

问题也解决了！ 总结两个inline-block元素之间要是有间隙的话，会产生空格的，若是把font-size变成0的话会把空格的字符兼具给抹掉