子DIV浮动（float）后父DIV高度自动失效解决方案
2015-11-24 15:03
357 查看
如下所示，子元素div2 本身具有高度和宽度，但由于其具有float:left属性后，其父元素div1不具有高度。
<html>
<head>
</head>
<body>
<div id="div1">
<div id="div2" style="width:100px;height:20px;background:red;float:left;"></div>
</div>
</body>
</html>
当然我们可以直接给div1设置固定高度来解决。另外一种解决办法是给父元素div1设置overflow:auto或者overflow:hidden属性。如下所示：
<html>
<head>
</head>
<body>
<div style="overflow:hidden;">
<div style="width:100px;height:20px;background:red;float:left;"></div>
</div>
</body>
</html>
<html>
<head>
</head>
<body>
<div id="div1">
<div id="div2" style="width:100px;height:20px;background:red;float:left;"></div>
</div>
</body>
</html>
当然我们可以直接给div1设置固定高度来解决。另外一种解决办法是给父元素div1设置overflow:auto或者overflow:hidden属性。如下所示：
<html>
<head>
</head>
<body>
<div style="overflow:hidden;">
<div style="width:100px;height:20px;background:red;float:left;"></div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- RABBITMQ集群及HA、LB
- 举例说明数据库一、二、三及BCNF范式
- oracle表分区详解
- GIF loading
- arcgis api for JavaScript相关
- CSS（3）
- 高德提示无本地方法
- js判断是否在微信浏览器中打开
- mysql5.6不能输入中文
- 线性表的顺序列表实现
- sql查找实例语句
- Java实现观察者设计模式
- TBB（Intel Threading Building Blocks）学习笔记
- 数据库的范式
- 协议森林11 涅槃 (TCP重新发送)
- 在hibernate中修改某几个字段的方法
- 继承
- 微软算法100道题------从1到n的正数中1出现的次数
- ListView
- pyhon中利用publicsuffix获得域名