为什么会出现浮动？浮动元素会引起什么问题？如何清除浮动？

　　浮动将元素排除在普通流之外，即元素将脱离文档流，不占据空间。浮动元素碰到包含它的 边界或者浮动元素的边界停留

为什么需要清除浮动

1、子元素浮动后，不占位置，父元素的高度无法被撑开，影响与父元素同级的元素；

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

3、若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构解 决方法

清除浮动的方式

1、使用 CSS 中的 clear:both（; 放一个空的标签，并设置上述 css，注意该标签必须是块元素）, 属性来清除元素的浮动 可解决 2、3 问题

2、对于问题 1，添加如下样式，给父元素添加 clearfix 样式：

 1 .clearfix:after {
 2 content: ".";
 3  display: block;
 4 height: 0;
 5  clear: both; 
 6 visibility: hidden; }
 7 /* for IE */
 8 .clearfix{ 
 9 *zoom:1;
10  }

3、给父级元素设置双伪元素；

 1 <div class="container clearfix">
 2 <div class="wrap">aaa</div>
 3 </div>
 4 .clearfix:after{
 5 content:""; /*设置内容为空*/
 6 height:0; /*高度为 0*/
 7 line-height:0; /*行高为 0*/
 8 display:block; /*将文本转为块级元素*/
 9 visibility:hidden; /*将元素隐藏*/
10 clear:both; /*清除浮动*/
11 }
12 .clearfix{
13 zoom:1; /*为了兼容 IE*/
14 }

4、给父级元素设置 overflow：hidden；或 overflow：auto；