非IE浏览器下，容器不设定高度且子元素浮动时，容器高度不能被内容撑开。此时，内容会溢出到容器外面而影响布局。此类现象被称为浮动（溢出）。float是css样式中的定位属性，用于设置标签对象（如：<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。CSS浮动在网页设计和网站开发中都发挥着至关重要的作用。

首先，我们先来了解CSS的浮动原理：

1.浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）；

2.浮动元素碰到包含它的边框或其他浮动元素的边框停留。

浮动元素碰到包含他的边框或者浮动元素的边框停留。由于浮动元素不在文档流之中，文档流的块级框会表现的就像浮动框不存在一样。浮动元素会漂浮在文档流的块级框之上。

CSS浮动虽然为网站开发带来了更多的可能，但与此同时，CSS浮动也会带来问题：

1.父级元素的高度将会无法被撑开，会影响与父级元素同级的元素；

2.与浮动元素同级的非浮动元素（内联元素）会跟随其后；

3.若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构。

当然，有的时候我们还需要清除CSS浮动，正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。

下面我们来看CSS浮动的清除方式：

1.父级盒子定义高度（height）;

2.最后一个浮动元素后面加一个div空标签，并且添加样式clear: both;

3.包含浮动元素的父级标签添加样式overflow为hidden/both;

4.父级div定义zoom;

好了，关于CSS浮动的知识我们就讲到这里，想学习更多的CSS知识，请到动力节点在线网站的免费视频课程学习。除了有名师讲解，动力节点在线更加关注基础薄弱的同学，把知识点拆分地很细，学起来也事半功倍。