2018-3-14 seo达人
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
浮动是什么？
浮动元素会脱离文档流进行左浮或者右浮，直到碰到父级元素或者其他的浮动元素。
为什么清除浮动：浮动会导致父元素高度坍塌，因为浮动脱离文档流，浮动以后不占文档流的位置，撑开的父元素高度肯定会坍塌。
清除浮动的八种方法：
1、父级div给出固定的高度。手动定义height，这样就解决了父级元素获取不到高度的问题。
优点：代码量少，简单容易掌握。
缺点：只适合高度固定的布局，如果高度和父级div不同会出现问题。
2、overflow，设置overflow：hidden。
优点：代码少，浏览器支持。
缺点：会把超出的部分隐藏起来，而且不能配合position使用
3、额外标签，添加一个新的标签，如div，或者br，并且设置标签的属性clear：both；清除浮动，让父级能自动获得高度。
优点：代码少，浏览器支持，不会各种问题。
缺点：会有很多空的div或者br。
4、使用单伪类after和zoom，使用方法：
.clearfloat:after{
content:"";//设置内容为空
height:0;//高度为0
line-height:0;//行高为0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
}
.clearfloat{
zoom:1;为了兼容IE
}
优点：浏览器支持好，大型的浏览器都在使用，建议使用。
缺点：代码多，需要after和zoom都要使用才能兼容主流的浏览器。
5、双伪类清除浮动。使用方法：
.clearfloat:before,.clearfloatafter {
content: "";
display: block;
clear: both;
}
.clearfloat {
zoom: 1;
}
缺点：不严谨不建议使用
6、父级div跟着浮动，所有代码一起浮动就会形成一个整体，
缺点：会产生新的问题，不建议使用。
7、父级定义display：table；将div属性变成的表格。
缺点：产生新的问题，而且影响布局。
8、overflow：auto；需要设置width，不设置height，浏览器会自动检测浮动区的高度。
缺点：容易生成滚动条。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务