什么是浮动布局?

CSS 的 Float（浮动），会使元素向左或向右移动，使元素共享一行，类似于给元素加了inline-block的作用。在w3c中这样描述浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。接下来我们具体来看。 float: left、right...

浮动带来的影响

1. 脱离文档流，不占据页面空间
2. 浮动会将行内元素和行内块元素转化为块元素

消除浮动

1. 给浮动元素的父级一个高度。
2. 给浮动元素的父级加overflow:hidden
3. 给浮动元素的兄弟元素加clear:both