浮动布局概述

float 布局应该是目前各大网站用的最多的一种布局方式了，但是也特别复杂。浮动元素是脱离文档流的，但不脱离文本流，浮动布局的兼容性比较好，但是浮动带来的影响比较多，页面宽度不够的时候会影响布局。

那么它有什么特点呢？

• 对自身的影响
  • float 元素可以形成块，如 span 元素。可以让行内元素也拥有宽和高，因为块级元素具有宽高
  • 浮动元素的位置尽量靠上
  • 尽量靠左（float:left）或右（float:right），如果那一行满足不了浮动元素的宽度要求，则元素会往下掉
• 对兄弟元素的影响
  • 不影响其他块级元素的位置
  • 影响其他块级元素的文本
  • 上面贴非 float 元素
  • 旁边贴 float 元素或者边框
• 对父级元素的影响
  • 从布局上 “消失”
  • 高度塌陷

什么是高度塌陷：

两个 float 元素虽然包含在第一个 container 中，但是却超出了第一个 container 的范围，在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

解决办法有下面几种：

1.父元素设置 overflow: auto 或者 overflow: hidden

2.给父元素加一个 after 伪类（清除浮动）