元素脱离普通文档流后特点及问题总结
2016-08-28 14:59
232 查看
在使用float,position:absolute | fixed属性之后元素会脱离普通文档流,与inline-block和position:relative不同,后两者还在普通文档流中。
对于行内元素来说,允许行内元素使用原本不能使用的width,height,margin-top,margin-bottom,padding-top,padding-bottom属性。
元素脱离普通文档流后其他元素定位会将其视为不存在,尤其是对于没有设置高度且所有子元素脱离后的父元素,父元素高度将变为0
红色浮动前 红色浮动后,绿色div高度为0消失
*{margin: 0;padding: 0;}
.content{width: 100px;background: green;}
.float{width: 50px;height: 50px;background: red;}
1.给外层content设置高度,但是这种方法很死板,并不好用
2.在content父元素中加入.content{overflow: hidden;}
3.在所有浮动元素后面加入<div style="clear: both;">
如
<div class="float"></div>
<div style="clear: both;"></div>上面三种方法都可以让消失的父元素重新定位。
对于行内元素来说,允许行内元素使用原本不能使用的width,height,margin-top,margin-bottom,padding-top,padding-bottom属性。
元素脱离普通文档流后其他元素定位会将其视为不存在,尤其是对于没有设置高度且所有子元素脱离后的父元素,父元素高度将变为0
红色浮动前 红色浮动后,绿色div高度为0消失
*{margin: 0;padding: 0;}
.content{width: 100px;background: green;}
.float{width: 50px;height: 50px;background: red;}
.float{float: left;} .test{width: 100px;height: 100px;background: yellow;}
<div class="content"> <div class="float"></div> </div> <div class="test"></div>怎么解决这种问题呢?
1.给外层content设置高度,但是这种方法很死板,并不好用
2.在content父元素中加入.content{overflow: hidden;}
3.在所有浮动元素后面加入<div style="clear: both;">
如
<div class="float"></div>
<div style="clear: both;"></div>上面三种方法都可以让消失的父元素重新定位。
相关文章推荐
- 浮动的元素在文档中是脱离正常文档流的位置问题
- 总结:解决鼠标经过内部元素触发onmouseout事件的问题
- 算法:元素选择问题总结
- hbase0.96与hive0.12整合高可靠文档及问题总结
- scrapy文档(教程)学习遇到的问题总结
- Java动态 遍历List 时删除List特征元素 异常问题 及解决方案总结
- 关于audio元素在实际项目中遇到的问题总结
- [C++]各种容器特点总结—容器的选择问题
- 文档问题机房合作项目总结-心里导航
- 选取文档元素的方法总结
- 关于元素选择问题的总结
- 【总结】大规模数据测试,数据准备时需要注意的问题(【保护已有数据】【大规模数据影响普通测试】【不要着急删除数据】)
- flash遮挡DIV元素的问题总结
- 总结最近看到的关于块级元素、居中的问题
- Oracle10g技术问题总结(三)普通用户解锁、登录isqlplus
- VS6.0单文档工程中,View界面想使用CListCtrl & list = GetListCtrl(); 问题总结
- 用MVVM模式开发中遇到的零散问题总结(5)——将动态加载的可视元素保存为图片的控件,Binding刷新的时机
- HTML5之SVG 2D入门8―文档结构及相关元素总结
- Java动态 遍历List 时删除List特征元素 异常问题 及解决方式总结
- 手机开发中遇到关于QQ(普通版本)视频通话旋转问题总结: