我们先来回忆一下float的特征:
1)块在一排显示
2)内联支持宽高
3)默认内容撑开宽度
4)脱离文档流
5)提升层级半层
由于float浮动脱离文档流,那么就很容易产生各种兼容性和由于浮动产生的视觉效果上的差别。接下来我们分析几种主要的解决方法。大家最熟悉的方法应该就是添加空标签,然后利用clear来清除浮动,其实方法很多,但是不是每种都适合我们所遇到的情况,也不是每种都能很好的兼容所有浏览器,所以需要选择适当的方法去解决这个由于浮动所产生的问题。
一、下面几个是计较传统的几种清浮动的方法,但是在目前的使用中还是有些问题
1、加高度 (扩展性不好)
如果是通过加高度进行清浮动的话,那么就意味着在设计的过程中,高度是固定的,这样就无法自适应那些需要自适应高度的情况,扩展性不好。
比如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
border: 1px solid red;
}
.item{
width: 200px;
height: 200px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
</html>
显示结果如下,外面的div无法包住里面的div,如果通过给外面的div添加高度的话,就意味着里面的内容无法自适应高度,这样的话,扩展性不好。
3 、.inline-block 清浮动方法 (margin左右auto失效)
4、空标签清除浮动 (IE6 最小高度 19px;(解决后IE6下还有2px偏差))
5、.br清浮动 (不符合工作中:结构、样式、行为,三者分离的要求)
即添加下面这条语句在里面的div后面:<br clear="all" />
二、目前常用的三种清浮动方法,也是比较有效的方法
先抛一块问题砖(display: block):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
border: 1px solid #ccc;
background: #c2ffe3;
color: #fff;
margin: 50px auto;
padding: 50px;
}
.div1{
width: 80px;
height: 80px;
background: red;
float: left;
}
.div2{
width: 80px;
height: 80px;
background: blue;
float: left;
}
.div3{
width: 80px;
height: 80px;
background: sienna;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
</body>
</html>
我们本意是想让三个div靠左显示,并且是在第一个div中,但是现在的效果是边框没有被撑开,margin值不能正常显示。所以可以采用以下几种方法进行解决。
1、添加新的元素 、应用 clear:both;
html:
<div class="box">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="clear"></div>
</div>
css:
.clear{clear:both; height: 0; line-height: 0; font-size: 0}
2、父级div定义 overflow: auto/hidden(注意:是父级div也就是这里的 div.box)
.box{
border: 1px solid #ccc;
background: #c2ffe3;
color: #fff;
margin: 50px auto;
padding: 50px;
overflow: auto;
zoom: 1;//zoom 兼容IE6 IE7,处理兼容性问题
}
原理:使用overflow属性来清除浮动有一点需要注意,overflow属性共有三个属性值:hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动,但切记不能使用visible值,如果使用这个值将无法达到清除浮动效果,其他两个值都可以,其区别据说在于一个对seo比较友好,另个hidden对seo不是太友好。
3、据说是现在主流的方法 :after 方法:(注意:作用于浮动元素的父亲)
原理:这种方法清除浮动是现在网上最拉风的一种清除浮动,他就是利用:after和:before来在元素内部插入两个元素块,从面达到清除浮动的效果。其实现原理类似于clear:both方法,只是区别在于:clear在html插入一个div.clear标签,而box利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。
html:
<div class="box clearfix">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
css:
.clearfix{
*zoom:1;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
1)after伪类: 元素内部末尾添加内容;:after{content"添加的内容";} IE6,7下不兼容
2)zoom 缩放
a、触发 IE下 haslayout,使元素根据自身内容计算宽高。
b、FF 不支持;
其中clear:both;指清除所有浮动;content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少,其中content()可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它,但是不显示出来,这样才能实现清楚浮动。
最终的效果图: