文章归档友情连接照片地图

子级全浮动,父div无法确定高度的解决方法

分类:前端技术  作者:rming  时间:2011-06-03
当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题。

个人理解就是一个div属性里没有设置float属性,但是它的子div里面都设置了float属性,这样导致了父div的高度没办法确定,解决方法就是给父div设置clear:both;属性。
举个例子来说:

常规布局

.head{

width:100%;

height:100px;

float:left;

background:#000eee;

}

.content{

width:980px;

height:600px;

margin:0 auto;

background:#000eee;

}

.foot{

width:100%;

height:60px;

float:left;

background:#000eee;

在这个页面的content中就会出现高度不定的情况,导致foot 层的向上漂移,使页面底部位置发生错乱。
解决办法就是给content 层加上clear:both;的属性。
即:

.content{

width:980px;

height:600px;

margin:0 auto;

clear:both;
background:#000eee;

}

这样页尾的位置就不会发生错乱了。

最后,再附加一点前台css常识:
即:margin : auto | length 由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的高度。对于内联对象来说,左右外延边距可以是负数值。

padding : length 由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度。

float : none | left |right 这个是浮动,在定义布局中必定用到的属性,在使用它的时候要注意产生的走位和浏览器兼容性问题,要在很多的实践操作中多了解这个属性。有这个属性就要了解以下这个配套使用的属性“清除”

clear : none | left |right | both; none 允许两边都可以有浮动对象both不允许有浮动对象;left不允许左边有浮动对象 right不允许右边有浮动对象。

background:url(images/aardvark.gif) left top no-repeat | repeat-x | repeat-y 定义背景图片来美化版面也是我们很常用到的属性。

overflow : visible | auto | hidden | scroll 这个作用在布局中我通常利用他来防止、解决浏览器兼容出现问题

border:1px solid #CCCCC 这个是定义边框大小,线条,颜色的属性。

list-style-image list-style-position list-stle-type 这个列表属性通常使用在有序列表和无序列表当中,列表在定义网页标题索引文字连接中经常使用,这是验证CSS定义优越于表格的典型代表。



  1. Rming Rming

    :idea:

    1. Username Username

      360极速怎么不行啊

提交评论