关于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. python函数传参是传值还是传引用？

    首先还是应该科普下函数参数传递机制,传值和传引用是什么意思? 函数参数传递机制问题在本质上是调用函数(过程)和被调用函数(过程)在调用发生时进行通信的方法问题.基本的参数传递机制有两种:值传递和引用传 ...

  2. Hadoop之TaskInputOutputContext类

    在MapReduce过程中,每一个Job都会被分成若干个task,然后再进行处理.那么Hadoop是怎么将Job分成若干个task,并对其进行跟踪处理的呢?今天我们来看一个*Context类——Tas ...

  3. DIV怎样能够垂直居中

    这里只说固定宽高的情况: 1.Top:50%; 2.margin-top:-(height/2); 就这样. 不过很好奇有没有v-align之类的属性可以直接实现.

  4. WCF入门教程：WCF基础知识问与答(转)

    学习WCF已有近两年的时间,其间又翻译了Juval的大作<Programming WCF Services>,我仍然觉得WCF还有更多的内容值得探索与挖掘.学得越多,反而越发觉得自己所知太 ...

  5. android 项目学习随笔十三（ListView实现ITEM点击事件,将已读状态持久化到本地）

    1.因为给LISTVIEW增加了两个头布局,所以在点击事件ITEM索引会增加2,比如原来第一条数据的索引应该为0,增加两个头布局后,它的索引变为        2,为了使LISTVIEW的ITEM在点 ...

  6. EL表达式,JSTL：jsp standard Tag Library

    1.EL表达式的作用: 1.1访问Bean的属性.  方式一:${对象名 . 属性名} eg:${user.name}    方式二:${对象名["属性名"]} 1.2输出简单的运 ...

  7. hadoop概述测试题和基础模版代码

    hadoop概述测试题和基础模版代码 1.Hadoop的创始人是DougCutting?() A.正确 B.错误答对了!正确答案:A解析:参考课程里的文档,这个就不解释了2.下列有关Hadoop的说法 ...

  8. ubuntu屏幕分辨率问题

    今天在ubuntu下工作时突然屏幕上下各出现了一个大概2厘米的黑条,感觉屏幕被横向拉长了,莫名其妙,开始以为简单的调整下分辨率就好了,在系统设置显示里面发现分辨率只有两个可选参数,并且对象为未知,由于 ...

  9. hide your website's wordpress info/path/way

    Hide Wordpress Info of your website plugin hide-wp 使用apache语句和wp方法重写 但这个插件有个局限就是,你的网站使用的wordpress的话, ...

  10. ServiceStack.Redis之IRedisClient 03_转

    事实上,IRedisClient里面的很多方法,其实就是Redis的命令名.只要对Redis的命令熟悉一点就能够非常快速地理解和掌握这些方法,趁着现在对Redis不是特别了解,我也对着命令来了解一下这 ...