关于CSS的浮动

了解普通流 

块级元素：独占一行

行内元素：不独占一行

我们应该如何让多个块级盒子（div）水平排列成一行呢？这样我们就需要用到浮动。

语法规则：选择器{     float:属性值 }

 div{
      float: left;
   }

属性值：none：元素不浮动、left：元素左浮动、right：元素右浮动

关于高度塌陷的问题

父元素没有指定的高度，父元素的高度是由子元素撑起来的当子元素由于布局需要进行浮动，浮动的子元素会脱离文档流，导致子元素无法再撑起父元素，所以父元素的高度就塌陷了

如何解决：给父元素添加 display:inline-block;或者添加浮动。

浮动元素的特性

• .如果多个盒子都设置了浮动，它们会按照属性值在一行内显示并且顶端对齐排列。
• 浮动元素会具有行内块元素特性

删除浮动

选择器{     clear:属性值 }

div{
      clear: left;
   }

属性值： left：清除左侧浮动的影响、right：清除右侧浮动的影响、both：同时清除左右两侧浮动的影响