子元素设置浮动样式，父元素高度为0_对子元素设置浮动-优快云博客

本文探讨了当子元素应用浮动样式时，父元素高度为0的问题，并提供了多种解决方案，包括清除浮动、使用overflow属性等。同时介绍了当最外层为a标签时如何设置尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子元素如果设置了浮动样式，那么它就会脱离文档流，从而导致父元素高度变成0，当然不能说这是一个Bug，float的出现的初衷就是为了实现文字环绕图片来实现图文混排和流式布局，所以只能说这种情况只能是由于浮动样式的特性决定的。

测试用例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<style type="text/css">
	*{margin:0;padding:0;font-family:微软雅黑;}
	.inner{height:30px;width:30px;border:1px solid #AFAFAF;float:left}
</style>
</head>

<body>
	<div class="outer">
		<div class="inner"></div>
	</div>
</body>
<script type="text/javascript">
jQuery(document).ready(function(){
	alert($(".outer").height());
})(window);
</script>
</html>

这个时候打印出来就是0了。

解决方式：利用clear:both;清楚浮动即可。需要在outer div层里在加上一句：(所以说在使用浮动样式之后，最好加上这句代码)

<div style="clear:both"></div>

解决方式2：直接在outer div层上加上样式overflow:hidden;

.outer{overflow:hidden;}

当然还有其它方式，这里不一一列举。

2、如果最外层outer是一个a标签，那么我们知道直接对a标签设置高度和宽度是不能成功的，这时候我们可以考虑以下解决办法：

方式1：对a标签加上display:block，但是会导致该a标签独成一行。如果要其他的标签浮动有效，这个a标签也得设定浮动样式。

方式2：设置float。变成浮动。

<a class="outer" style="float:left;height:30px;width:30px;background:#FF0000;">

方式3：设置padding。

<a class="outer" style="padding:20px 20px;background:#FF0000;">