关于float的二三事(一)
来源:互联网 发布:arrival to earth知乎 编辑:程序博客网 时间:2024/05/10 22:27
这篇是看了一些大神的博客之后根据自己的需要做的总结,仅为前端小白的学习笔记总结。
如果想要了解更详细的原理什么的,建议看http://www.zhangxinxu.com/wordpress/?p=594,里面的解释很棒!
可以再搭配着一些CSS文档看看。
有不对的地方欢迎指出,我还需要更多的学习!
一、浮动的包裹性和破坏性
在张鑫旭的关于浮动的博客里,他提到了“撇开浮动的“破坏性”,浮动就是个带方位的display:inline-box属性”。
display:inline-box——对象呈递为内联对象——成为inline-box
——对象的内容作为块对象呈递——可设置宽、高、margin等
包裹性:所产生的的结果就是使元素转为了line box模型中的inline box
破坏性:破坏的正是inline box,破坏了高度,产生高度塌陷问题
二、解决高度塌陷的问题
高度塌陷的产生:元素具有浮动属性--破坏inline box——破坏line box高度——没有高度——塌陷
塌陷:当标签里的元素只有样子没有实际高度时会塌陷(不只浮动能产生塌陷)
高度塌陷的解决:清除浮动
1°投机取巧法
直接一个<div style="clear:both"></div>,将其放在父标签的最后,当作其最后一个子标签。
2°overflow+zoom方法
.float{overflow:hidden;zoom:1} .float为父标签的类。
但是如果内部元素想来个负margin定位或负的绝对定位,便会直接被截掉了。
3°after+zoom方法:推荐使用
所谓after,就是指标签的最后一个子元素的后面。于是呢,我们可以用CSS代码生成一个具有clear属性的元素,其中的关键样式就是content了
.float{zoom:1}
.float:after{
display:block;
content:"clear";
clear:both;
line-height:0
visibility:hidden
}
- 关于float的二三事(一)
- 关于float,double的精度丢失(一)
- 关于css的float
- 关于float和Float的小提示
- 关于float的一些感悟
- 关于float的一些介绍
- 关于float的一些理解
- 关于float奇怪的bug
- 关于设置float的补充
- 关于float浮动的注意事项
- 关于css 的float属性
- 关于float的移位问题++
- html页面样式(一) css的float属性
- 布局(一)float/absolute/relative的原理
- 关于int,float,double与Integer、Float、Double的理解
- 关于float
- 关于float
- 关于float
- 基于Qt的车载GPS监控系统(7)数据记录
- Linux的访问控制列表facl
- 优化Android Studio/Gradle构建
- Delphi函数
- fragment tabhost
- 关于float的二三事(一)
- java泛型(一)
- matlab中varargout与nargout,varargin与nargin的区别
- 屏蔽第三方框架中的依赖包和.so文件
- Android 通用COLOR、通用SIZE(DP和SP)
- VC++ “时间复杂度”需要注意的常见问题
- 两种定时刷新局部页面的方法--采用异步流程
- 快速理解C#高级概念(一) Delegate委托
- PHP规范PSR0和PSR4的理解