div+css之清除浮动

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了div+css之清除浮动相关的知识,希望对你有一定的参考价值。

1、对父级设置适合CSS高度
对父级设置适合高度样式清除浮动,这里对“.divcss5”设置一定高度即可,一般设置高度需要能确定内容高度才能设置。这里我们知道内容高度是100PX+上下边框为2px,这样具体父级高度为102px

2、clear:both清除浮动

为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此div引入“class="clear"”样式。这样即可清除浮动。

 

3.额外标签法
这种方法应该是最简单的一种了,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;}

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

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

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

@copy from http://www.cnblogs.com/zzwlovegfj/archive/2012/08/12/2634313.html

以上是关于div+css之清除浮动的主要内容,如果未能解决你的问题,请参考以下文章

css清除浮动的几种方式,哪种最合适?

怎么取消DIV 浮动?

有关css伪类:after清除浮动的问题

关于css中clear:both清除浮动防止父级元素高度坍塌的原理

css 清浮动方法(总结8种方法)

清除浮动的方法