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之清除浮动的主要内容,如果未能解决你的问题,请参考以下文章