css 清除浮动

标签：高度自适应   blog   http   使用   ar   strong   2014   div   问题   

一般浮动是什么情况呢？一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。

浮动产生样式效果截图

本来两个黑色对象盒子是在红色盒子内，因为对两个黑色盒子使用了float浮动，所以两个黑色盒子产生了浮动，导致红色盒子不能撑开，这样浮动就产生了。

简单地说，浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动。

二、浮动产生负作用   -   TOP

1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开
如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

当元素有浮动属性时，会对其父元素或后面的元素产生影响，
会出现一个布局错乱的现象，可以通过清除浮动的方法来解决浮动的影响。

浮动的清理(clear):

值:
none:默认值。允许两边都可以有浮动对象；
left:不允许左边有浮动对象；
right:不允许右边有浮动对象；
both:左右两侧不允许有浮动对象。

清除浮动的方法：

1、对父级设置适合CSS高度
对父级设置适合高度样式清除浮动.

2.额外标签法
这种方法应该是最简单的一种了，w3c建议在容器的末尾增加一个“clear:both"的元素
强迫容器适应它的高度以便装下所有的float元素。
<div id="main">
   <div id="left"></div>
   <div id="right"></div>
   <div class="clear"></div>
</div>
<div id="footer"></div>

.clear{clear:both;}

3.父元素添加overflow:hidden;
注：如果子元素使用了定位布局，就会很难实现。

4.利用伪对象after方法
定义一个类，使用伪对象after,控制浮动元素的影响。
网上最流行的清除浮动代码：
.clearFix:after{
 clear:both;
 display:block;
 visibility:hidden;
 height:0;
 line-height:0;
 content:‘‘;

}
.clearFix{zoom:1;} /*解决ie6/7兼容问题*/

css溢出的使用
设置对象的内容超过其指定高度及宽度时，如何管理内容。
overflow:visible【默认值，不剪切内容也不添加滚动条】
auto【在必需时，对象内容才会被剪切或添加滚动条】
hidden【不显示超过对象尺寸的内容】
scroll【总是显示滚动条】

zoom属性：只有ie内核的浏览器支持，缩放比例。
设置或检索对象的缩放比例。
语法：normal【默认值，使用对象的实际尺寸】；number【百分数|无符号浮点实数。浮点实数
为1.0或百分数为100%时相当于此属性的normal值
zoom:1解决ie6高度自适应问题。

css 清除浮动

标签：高度自适应   blog   http   使用   ar   strong   2014   div   问题   

原文地址：http://www.cnblogs.com/tanghongbo/p/3956962.html