父元素由于子元素使用float而无法自适应高度

本文介绍由于子元素使用 float 导致父元素无法自适应子元素的高度的解决方法。

正常情况下，父元素不需要设置高度也可以自适应子元素的高度，举个例子，很简单的一个结构：

我们不给父元素设置高度：

效果如下：

父元素的高度消失了：

这是因为加了浮动以后元素会脱离标准的文档流，破坏inline-box，造成的后果就是没有高度，所以父元素无法获取子元素的高度，自然也无法自适应高度。

接下来介绍解决子元素浮动以后父元素自适应高度的方法：

如果在确定知道子元素高度的情况下，可以直接给父元素设置高度：

这样虽然父元素没有被子元素撑起来高度，但也可以把子元素包住：

但是这样虽然可以解决问题，但也不是自适应高度啊，而且如果子元素高度不一定，这种办法也不是很好，接下来介绍方法二。

在父元素的样式中设置 overflow 属性，可以是 hidden 或者是 auto ，都可以达到自适应设置了浮动的子元素高度：

父元素设置了 overflow 属性以后，不论子元素高度是多少，父元素都可以自适应高度：

既然父元素高度消失是由于浮动造成的，那么我们清楚浮动不就可以了。我们在父元素结束标签 </div> 前加入一个子元素，给它设置 class 为 clear ：

然后给该元素添加一个清除浮动的样式：

这样子就可以实现清除浮动，也可以达到父元素自适应子元素高度的效果：

浮动说简单不简单，说难也不难，还是要平时多写多积累啊。

主要功能：

获取浏览器显示区域（可视区域）的高度

：

$(window)height();

获取浏览器显示区域（可视区域）的宽度

：

$(window)width();

获取页面的文档高度

$(document)height();

获取页面的文档宽度

：

$(document)width();

浏览器当前窗口文档body的高度：

$(documentbody)height();

浏览器当前窗口文档body的宽度：

$(documentbody)width();

获取滚动条到顶部的垂直高度

(即网页被卷上去的高度)

$(document)scrollTop();

获取滚动条到左边的垂直宽度

：

$(document)scrollLeft();

获取或设置元素的宽度：

$(obj)width();

获取或设置元素的高度：

$(obj)height();

某个元素的上边界到body最顶部的距离：objoffset()top;（在元素的包含元素不含滚动条的情况下）

某个元素的左边界到body最左边的距离：objoffset()left;（在元素的包含元素不含滚动条的情况下）

返回当前元素的上边界到它的包含元素的上边界的偏移量：objoffset()top（在元素的包含元素含滚动条的情况下）

返回当前元素的左边界到它的包含元素的左边界的偏移量：objoffset()left（在元素的包含元素含滚动条的情况下）

//返回当前页面高度

function

pageHeight(){

if($browsermsie){

return

documentcompatMode

==

"CSS1Compat"

documentdocumentElementclientHeight

:

documentbodyclientHeight;

}else{

return

selfinnerHeight;

}

};

//返回当前页面宽度

function

pageWidth(){

if($browsermsie){

return

documentcompatMode

==

"CSS1Compat"

documentdocumentElementclientWidth

:

documentbodyclientWidth;

}else{

return

selfinnerWidth;

}

};

以下是其它网友的补充：

获取浏览器显示区域的高度

：

$(window)height();

获取浏览器显示区域的宽度

：$(window)width();

获取页面的文档高度

：$(document)height();

获取页面的文档宽度

：$(document)width();

获取滚动条到顶部的垂直高度

：$(document)scrollTop();

获取滚动条到左边的垂直宽度

：$(document)scrollLeft();

计算元素位置和偏移量：$(id)offset();

offset方法是一个很有用的方法，它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含

top和left两个属性。

offset(options,

results)

optionsrelativeTo指定相对计

算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。

optionsscroll是否把

滚动条计算在内，默认TRUE

optionspadding是否把padding计算在内，默认false

optionsmargin

是否把margin计算在内，默认true

optionsborder是否把边框计算在内，默认true

子页面控制父页面：

parentdocumentdocumentElementscrollTop;

parentdocumentdocumentElementclientHeight;

$('#pason>div')有'>'符号的是选择直接子节点。

没有'>'符号的是选择所有div元素。

所以第一种方法，一句在前的时候，先把id为pason的div元素下的所有div元素的背景色变成红色，第二句是把id为#pason的直接子节点背景色变成红色，他的直接子节点是baidu和google，并没有改变sina的颜色。

第二种方法，第二句在前头，就是把id为pason的直接子节点变成绿色，即把baidu和google变成了绿色，再执行第一句话$('#pason div')css("background","red");//1;的时候，他就把所有div的颜色都变成红色了，所以sina也变了，最后就是全部为红色

以上就是关于父元素由于子元素使用float而无法自适应高度全部的内容，包括:父元素由于子元素使用float而无法自适应高度、jquery如何获取元素的滚动条高度等实现代码、jQuery 如何获取到隐藏元素的高度或者在dom元素可见性改变时能触发个事件也行。等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！