关于float的说明

   

如图所示，蓝色的div和红色的div处于黑色的div（宽为500px)之中，其中蓝色的div设置了做浮动；
由图一（红色div的margin-top为10px，margin-left为200px） 知：浮动之后蓝色div脱离了正常的文档流，而紧接着蓝色div的红色div则升了上去，这个蓝色div浮动层对于红色div的影响在于红色div内容显示方面：具体说就是红色div里的内容会以蓝色div的结尾为开始显示的地方，对比图二和图三，图二红色的margin-top为75px，图三为76px；但是图二和图三的红色div的margin-left都是一样的为100px，由此可知以上结论 的正确性；浮动的影响暂时只知道有这一点。由三张图也可知红色div的属性设置皆是无视浮起的蓝色div的（如margin-left仍然以黑色的div为依据的，并未受到蓝色div的影响）【补充】float只影响周围元素的显示，其他的方面(需要计算的地方等等)都可以忽略float的元素。

关于float的说明的更多相关文章

  1. js实现省市区联动

    先来看看效果图吧,嘻嘻~~~~~~~~~~~~~~~~~~~· 代码在下面: 示例一: html: <!DOCTYPE html> <html> <head> &l ...

  2. CSS float 浮动属性

    本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...

  3. 在树莓派Raspbian下安装支持Hard Float的.NET环境

    [题外话] 最近入了个树莓派玩,系统装的官方推荐的Hard Float的Raspbian,由于衍生自Debian,所以Mono什么的非常好装.但是官方源中的Mono在Hard Float的Raspbi ...

  4. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  5. CSS float 定位和缩放问题

    今天调试一个看起来很简单的前端问题,但却花了太多的时间,示例代码: <!DOCTYPE html> <html> <head> <title></ ...

  6. chrome中不可见字符引发的float问题

    起因是刷知乎时碰到这么个问题:https://www.zhihu.com/question/41400503 问题代码如下: <!DOCTYPE html> <html lang=& ...

  7. c# float显示时保存一位小数

    UI显示时候,需求保留一位小数 //保留一位小数 参考: http://blog.sina.com.cn/s/blog_620531730100kfz6.html float ff = 1.01f; ...

  8. 前端之float的几种清除浮动方式

    前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.float清除方式1 <!DOCTYPE ...

  9. 格式化 float 类型,保留小数点后1位

    """  练习 :   小明的成绩从去年的72分提升到了今年的85分,请计算小明成绩提升的百分点,   并用字符串格式化显示出'xx.x%',只保留小数点后1位: &qu ...

  10. CSS清除浮动float方法总结

    使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...

随机推荐

  1. linux下创建的符号链接的权限

    今天为shell脚本创建符号链接的时候突然发现的, 创建的符号链接文件的默认权限是 777, 而想要这个脚本可执行, 必须为真正的文件加上 x 权限才可以.

  2. linux中模块的相关操作

    /lib/modules/[kernel版本]/modules.dep 这个文件记录了模块的依赖关系 modprobe 和 insmod 这两个命令都可以加载模块,但是modeprobe会自动分析模块 ...

  3. Swift 注释

    注释就是对代码的解释和说明.目的是为了让别人和自己很容易看懂.为了让别人一看就知道这段代码是做什么用的. 正确的程序注释一般包括序言性注释和功能性注释.序言性注释的主要内容包括模块的接口.数据的描述和 ...

  4. 某硕笔试题mysql数据库部分（较为全面）

    Student(S#,Sname,Sage,Ssex) 学生表  Course(C#,Cname,T#) 课程表  SC(S#,C#,score) 成绩表  Teacher(T#,Tname) 教师表 ...

  5. 160927、用jquery 重置表单的方法

    清空 我们项目小小部分的搜索条件: 客户要做的是,只要一键 "清空搜索条件" 即可清空维护地点.订单ID等条件. js函数 //重置表单 function resetform(){ ...

  6. 连接ssh反应很慢，卡，延迟

    1.关闭DNS反向解析在linux中,默认就是开启了SSH的反向DNS解析,这个会消耗大量时间,因此需要关闭.# vi /etc/ssh/sshd_configUseDNS=no 在配置文件中,虽然U ...

  7. Akka.NET

    https://github.com/akkadotnet Akka是什么? 可扩展的分布式实时事务处理 编写正确的并发,容错和可扩展的应用程序是太难了.大多数时候,这是因为我们使用了错误的工具和错误 ...

  8. html5 canvas 笔记三（绘制文本和图片）

    绘制文本 fillText(text, x, y [, maxWidth])   在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的. strokeText(text, x, y [, ma ...

  9. 7.1SportsStore:Navigation and Checkout

    准备示例项目 使用真实的产品数据 现在,要切换到使用真实的数据,从Deployd服务器获取. AngularJS通过一个叫做$http的服务,为Ajax请求提供支持.作者将在第三部分详细讲解它是怎么工 ...

  10. java 类型转化

    String 转int s="12345"; int i; 第一种方法:i=Integer.parseInt(s);;//直接使用静态方法,不会产生多余的对象,但会抛出异常 第二种 ...