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. 'InitializeCulture' is not a member of 'XXXX'

    今天在部署ASP.NET网页时出现一个奇怪的问题.在开发,调试时访问网页一切正常.但一部署到IIS中时就会出现以下的错误信息:'InitializeCulture' is not a member o ...

  2. RPM是RedHat Package Manager（RedHat软件包管理工具）

    RPM是RedHat Package Manager(RedHat软件包管理工具)类似Windows里面的“添加/删除程序” rpm 执行安装包二进制包(Binary)以及源代码包(Source)两种 ...

  3. chr(i) 返回整数i对应的ASCII字符

    >>> a 122 >>> b 344 >>> c = chr(a) >>> c 'z' 假如整数“i”超过了256将会爆出一个 ...

  4. 解决Linux/aix 下的websphere log4j不生效

    websphere 解决Linux/aix下的log4j不生效 在目录: /IBM/WebSphere/AppServer/profiles/AppSrv01/properties 增加一个文件:可以 ...

  5. Linux +apache+fastcgi运行c/c++

    在Linux上搭建apache+fastcgi环境,说多了都是泪啊. 花费我几天时间,开源软件虽说好用,但是版本众多,文档缺乏,什么都只能自己摸索. 终于成功运行起来,特此记录. 一. apache ...

  6. ***PHP各种编码的汉字字符串截取

    虽然PHP有现成的截取字符串函数substr(),但是这个函数不能对汉字字符串进行截取,要实现这种效果还需要我们自己去编写相应的函数.汉字有多种编码,比如GB2312,UTF-8等,汉字字符串的截取需 ...

  7. jsp空页面导致的jvm heap溢出

    为了性能测试需要,写一个了简单的jsp页面: <%@ page contentType="text/html;charset=UTF-8" language="ja ...

  8. Java 单链表逆序

    代码: package com.wangzhu.linkedlist; public class LinkedListDemo { /** * @param args */ public static ...

  9. 手游：cocos2d-x3.0 移植 wp8 开发 各种 “蛋疼”问题的汇总

    蛋疼的问题的起源: wp8 做应用开发,显示显示中文,源码包含中文都是没有一点问题的, 只是cocos2d-x 的编码方式(UTF-8),引起的一系列的问题. 1:不能显示服务器返回的中文 2:c++ ...

  10. easyui源码翻译1.32--SplitButton（分割按钮）

    前言 扩展自$.fn.linkbutton.defaults.用于$.fn.splitbutton.defaults重写默认值对象.下载该插件翻译源码 类似菜单按钮,分割按钮也与linkbutton和 ...