1、浮动的框可以向左或向右移动直到它的外边缘碰到包含框或另一个浮动框的边框为止。

脱离常规流,由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

2、几张图说明浮动常见现象:

差不多就这么多啦,现在知道文字环绕图片的原理了吗?倒数第二张图就是最好的说明,浮动的元素的脱离常规流,使后面的元素和自己重叠,但后面的元素的内容又会从浮动元素的左边开始!!!!!!这就是浮动元素的独特之处,也是和绝对定位(也是脱离常规流)很重要的一个不同之处。

(备注:float在绝对定位和display为none时不会被应用。 )

float虽然在绝对定位元素上是无效的,但可以和相对元素一起使用,效果相对于,先浮动,然后相对定位(所以浮动后的位置还会被占着的)

对css中的浮动属性float刨根解牛的更多相关文章

  1. 对css中的定位属性postion刨根解牛

    定位的基本思想很简单: 它允许你定义元素框相对于其正常位置应该出现的位置(relative),或者相对于父元素(absolute).另一个元素甚至浏览器窗口本身的位置(fixed).显然,这个功能非常 ...

  2. CSS基础之浮动属性float图文详解

      宏观地讲,我们的web页面的制作,是个“流”,必须从上而下,像“织毛衣”.   标准流里面的限制非常多,导致很多页面效果无法实现.如果我们现在就要并排.并且就要设置宽高,那该怎么办呢?办法是:超脱 ...

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

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

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

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  5. 【Web】CSS中的浮动float

    CSS中的float 文章目录 CSS中的float 1.float浮动属性 2.float文字环绕图片 3.float浮动的真正原因以及副作用分析 4.清除浮动的四种解决方法 5.实际应用 导航效果 ...

  6. CSS中的浮动和定位

    在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...

  7. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  8. css中的浮动以及清除浮动

    对于css中的浮动问题,曾经有一段时间我是懵懵懂懂的感觉,对于float这个属性一直是似懂非懂的赶脚,对于这种让我们一直懵懵懂懂的知识点,我们就需要找个时间点,仔仔细细的去将它搞懂,从这个过程中我们也 ...

  9. 如何理解CSS中的浮动 :其实他就像乘坐扶梯一样

    只要你用过自动扶梯,你就能很快的理解CSS中的浮动(Float). 你肯定遇到过这样的情况:       做好了,你想用CSS浮动来调整元素间的位置关系. 在写完代码之后,你发现浮动元素没出现在你设想 ...

随机推荐

  1. Nhibernate配置和访问数据问题

    今天开始用Nhibernate做为自己的ORM,但是做的过程中确实遇到了好多问题,现在将问题收集起来以防日后出现相同的问题, 总结下: 这就是我的整个项目,现在配置下hibernate.cfg.xml ...

  2. 《深入理解计算机系统》C程序中常见的内存操作有关的典型编程错误

    对C/C++程序员来说,内存管理是个不小的挑战,绝对值得慎之又慎,否则让由上万行代码构成的模块跑起来后才出现内存崩溃,是很让人痛苦的.因为崩溃的位置在时间和空间上,通常是在距真正的错误源一段距离之后才 ...

  3. UVA 11294 Wedding

    给n对夫妇安排座位,其中0h,0w分别表示新郎,新娘.同一对新郎,新娘不能坐在同一侧,而且互为通奸关系的人不能同时坐在新娘对面. 这道题目真是掉尽节操啊,,,欧美的氛围还是比较开放的. 分析: 首先说 ...

  4. [jobdu]二叉树的镜像

    树的镜像,这里的做法就是先序遍历的反过来呗. #include <iostream> #include <vector> using namespace std; void p ...

  5. SPRING IN ACTION 第4版笔记-第四章ASPECT-ORIENTED SPRING-009-带参数的ADVICE2 配置文件为XML

    一. 1.配置文件为xml时则切面类不用写aop的anotation package com.springinaction.springidol; public class Magician impl ...

  6. Dojo Widget系统(转)

    Dojo 里所有的小部件(Widget)都会直接或间接的继承 dijit._Widget / dijit._WidgetBase dijit._Widget 是 dojo 1.6 和 1.6之前的版本 ...

  7. JNI编程(一) —— 编写一个最简单的JNI程序

    来自:http://chnic.iteye.com/blog/198745 忙了好一段时间,总算得了几天的空闲.貌似很久没更新blog了,实在罪过.其实之前一直想把JNI的相关东西整理一下的,就从今天 ...

  8. Linux kernel ‘uio_mmap_physical’函数缓冲区溢出漏洞

    漏洞名称: Linux kernel ‘uio_mmap_physical’函数缓冲区溢出漏洞 CNNVD编号: CNNVD-201311-154 发布时间: 2013-11-13 更新时间: 201 ...

  9. EPUB弹出窗口式脚注

    网上搜到一些国学典籍的EPUB版,虽有古人的注解,但正文和注解混排在一起,当我只想迅速读正文的时候比较碍眼.于是研究了一下 EPUB3 中有关脚注(footnote)的规格定义,写了一个 Python ...

  10. (转载)腾讯CMEM的PHP扩展

    (转载)http://blog.renren.com/share/223341289/7693783476 题外话 最近公司在做相关的业务,由于Memcached协议缺少返回码,为了保证业务数据的安全 ...