栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

四十二章经 浮动DIV撑开父类

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

四十二章经    浮动DIV撑开父类

一、出现错误的解决方法
分解法
a.先分解为独立小项目
b.保证每个项目正确
c.合成项目
切记如果不能保证每个小项目完全正确,那么调试就是白做。
原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开。
以下是网上查找的几种解决办法,未测试完(假设父div的class为“container”):
方法1、使用伪类
复制代码
1 .container:after{
2 content: ".";
3 display: block;
4 height: 0;
5 clear: both;
6 visibility: hidden;
7 }
复制代码
1 .container{
2 display: inline-block;/第一种撑开办法,底下会有部分被遮到,所以添加这行,就完美了/
3 }
方法2、不撑开的原理是overflow不可见,所以给父div添加overflow:auto;就行,IE要用_height:1%;
1 .container{
2 overflow: auto;/让主要内容区随内容自动撑开/
3 overflow-y:hidden;/把出现的滚动条隐藏,但是底下会被遮到一点,不完美/
4 _height:1%;/对IE的hack/
5 }
方法3、可以专门最后添加一个子div用来清除浮动:
设置样式.clear{clear:both; font-size:0; height:1%;}
方法4、可以设置父div的高度(也就是手动撑开,不灵活);
方法5、直接给父div设置
display: inline-block;这样也自动撑开
方法6、直接给子div设置display: inline-block;也能自动撑开,但是排版问题有待研究学习。
方法7、从网上还发现了一种方法,给父div增加属性:display:table;

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/243028.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号