float你真的懂了吗
来源:互联网 发布:虚拟ip地址软件 编辑:程序博客网 时间:2024/06/08 19:31
什么是CSS浮动?引用W3School中的解释:
1 浮动的框可以向左或者向右移动,知道外边缘碰到包含框或者其他浮动框的边框
2 浮动框不在普通的文档流中,所以文档普通流中的框块表现的就像浮动框不存在一样
我们看一个栗子,PLUNKER
现在我们为div1加上浮动样式 float = right
可以看到div2顶替了div1原来的位置。
这时如果我们把div浮动到右边来,div1 和div2之间会发生什么呢?
试一试
可以看到div1 完全覆盖了div2. 这时由于div2是浮动框,它脱离了普通的文档流。
CSS最初为什么需要float这个样式呢? 最初是为了实现文字环绕图像这样的布局,看一个栗子,PLUNKER
我们将div设置为float=left。就做成了这种文字环绕图片的布局。这个由于浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。
如果想阻止行框被缩短,需要使用clear属性。
那么float+clear到底有什么实际用处呢?还是先看一个栗子吧 我们做一个水平定义列表 PLUNKER
一步步来,先做一个最基础的定义列表,效果就是这样了:
分析分析差别,标题需要加粗,右对齐,好像还有一定长度。
所以,加入CSS
dl { margin-top:0;}dd,dt { margin-left:0;}dt { font-weight:bold; width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align:right;}看看效果:
恩,感觉不大像。不过如果我们可以给标题加上float的话,似乎。。
dl { margin-top:0;}dd { margin-left:140px;}dt { margin-left:0; font-weight:bold; width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align:right; float:left;}效果如下
哈哈 效果不就有了嘛。
其实这个效果就是bootstrap3中的水平列表的一个简单实现。所以说bootstrap也是挺简单的嘛。
不过一切都离不开细节。对比一下我们的实现和bootstrap,你会发现bootstrap多了一个设置
clear: left;为什么要设置这个呢?
如果我们删除第一个标题的内容:
看看,乱了吧。
试着加上clear:left
此时又恢复了正常的格式。
所以说我们要多读读源代码,既要有整体把握,也得注重细节。
- float你真的懂了吗
- 你真的理解float left 或者float right吗?
- 你真的懂defer了吗?
- Markdown 你真的懂了吗
- 你真的真的懂了吗?
- 你确定你真的懂了line-height吗?
- Linux的Service/Daemon你真的懂了吗?
- C#你真的懂了吗 - 啥叫引用
- "extern C", 你真的懂了吗?
- 用例图——你真的懂了吗?
- 傅里叶变换的仿真,你真懂了吗
- 你真的已经搞懂JavaScript了吗?
- 你真的已经搞懂JavaScript了吗?
- 你真的已经搞懂JavaScript了吗?
- 你真的已经搞懂JavaScript了吗?
- 你真的已经搞懂JavaScript了吗?
- unsigned 关键字,你真的懂了吗?
- 你真的已经搞懂JavaScript了吗?
- COM学习笔记(二):引用计数
- JS RSA 签名实现
- Android实现短信发送器
- overload与override的区别
- ext3文件系统基础
- float你真的懂了吗
- 极光推送使用 IOS端
- 了解android的基本知识
- 编程珠玑第一章位图排序扩展算法(可以排列包含负数的整数)
- android 中调用接口发送短信
- CrtmpServer支持Android与IOS进行RTMP直播遇到的_checkbw问题
- JSP过滤器Filter配置过滤类型汇总
- Microsoft Visio 2010 如何把直线,虚线与箭头之间切换
- javascript移动开发性能太慢