float浮动，用于横向布局。 起初的横向布局都用display:inline-block，但是这会导致两个元素之间有空隙，而这是由代码换行解析成空格的，解决元素间有空隙，空格：font-size:0;,但影响很大。 float浮动会破坏line-box，即浮动元素脱离文档流（当给一个元素设置浮动了之后，它不会再占用页面当中的“位置”了），造成的影响：不会撑开父级的高度。如下图： 想要解决这个影响，就得清浮动（清除浮动所造成的影响）了。 清浮动后，如下： 清浮动的方法： 1.给浮动元素的父级加高度 　　拓展性不好 　　在不能确定父级高度的情况下不能使用 2.clear:both(用得最多的方法) 　　*zoom:1 用来触发 hasLayout(IE浏览器的BFC) 复制代码 .clear{ *zoom: 1;/*兼容IE6,7*/ } .clear:after{ content: ''; display: block; clear: both; } 复制代码 3.BFC(是一套渲染机制) 　　触发一个元素的BFC（Block Formatting Contexts，即块级格式化上下文） 　　相当于在这个元素里面建立起一堵围墙 　　围墙里面的内容和围墙外面的内容不会产生干扰，如： 复制代码 overflow: hidden; 复制代码 想要触发BFC的方式（满足任一条件即可）： （1）float的值不为none； （2）overflow的值不为visible； （3）display的值为inline-block, table-cell, table-caption, flex, inline-flex之一； （4）position的值不为static或则releative中的任何一个。https://www.cnblogs.com/ycgo/p/10368096.html