浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。
浮动元素引起的问题
多个浮动起的元素是无法撑开父元素的宽度，父元素的高度可能会变成0。
若浮动元素前面还有同级元素没有浮动则会影响页面结构。
关于清除浮动，方法有多种：
方式二:使用额外标签法
.clear{ clear:both; }
在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.
a里面的子盒子浮动会将本身的的父盒子高度重新撑开.
b.外部标签父盒子：会将这个浮动盒子的影响它的因素清除，但是不会撑开它的父盒子。
注意：这种方式书写简单快捷，一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱。
方法三:使用伪元素来清除浮动(after意思:后来,以后)
.clearfix:after{ content:“”;//设置内容为空 height:0;//高度为0 line-height:0;//行高为0 display:block;//将文本转为块级元素 visibility:hidden;//将元素隐藏 clear:both//清除浮动 }
优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站： 百度、淘宝网、网易等
方法四:使用双伪元素清除浮动
.clearfix:before,.clearfix:after { content: “”; display: block; clear: both; } .clearfix { zoom: 1; }
方式一:使用overflow属性来清除浮动
.ovh{ overflow:hidden; }
先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就清除了这个父元素中的，子元素浮动对页面的影响.
注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）.这种情况会触发BFC。
总结:overflow:hidden;方法会将超出部分隐藏，有时候我们想清除浮动并且保留超出部分时需要另设属性,clear:both;方法会增加许多不必要的标签,所以我们尽量使用:after方法来清除浮动。
