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

为什么出现浮动

       浮动定位将元素排除在普通流之外，即元素讲脱离文档流，不占据空间。浮动元素碰到包

含它的边框或者浮动元素的边框停留.

为什么需要清除浮动

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

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

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

决方法.

清除浮动的方式

1、使用 CSS 中的 clear:both;（放一个空的 div，并设置上述 css）,属性来清除元素的浮动

可解决 2、3 问题

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

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}.cl
earfix{display: inline-block;} /* for IE/Mac */

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

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

4、给父级元素设置 overflow：hidden；或 overflow：auto；本质是构建一个 BFC

<div class="container">
 <div class="wrap">aaa</div> 
</div> 
<style>
.container{
overflow:hidden
}
/*.container{
overflow:auto
}*/