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. iOS8上放大缩小的动画

    CGAffineTransformMakeScale这个方法我们以前经常使用,但是在IOS8上出现问题了 [UIView animateWithDuration:0.3 animations:^{ b ...

  2. selenium各种场景下的启动Firefox

    开始学习selenium时为了启动Firefox可谓费尽周折,在大神的帮助下才堪堪搞定,走出了selenium的第一步:jdk1.8 + selenium_2.46 + Firefox国际版40.0. ...

  3. HTML5&CSS3&JavaScript&PHP&MySQL学习笔记

    1.在文字间添加一条水平线  使用<hr />  注意该符号不是成对出现的 2.<q> </q>用来标记于段落中的较短引用,浏览器会在它之间的语句两端加上双引号. ...

  4. hdu 3718

    一个二分图最大匹配的题: 匈牙利算法不熟: 建了个模,用最小费用最大流解决了 #include <iostream> #include <cstring> #define IN ...

  5. Android版:验证手机号码的正则表达式

    http://blog.csdn.net/dai_zhenliang/article/details/8186249 /** * 验证手机格式 */ public static boolean isM ...

  6. const变量的存储区及修改权限

    转自const变量的存储区及修改权限 [cpp] view plaincopy const int a = 1; int *p = const_cast<int*>(&a); *p ...

  7. Linux 串行终端,虚拟终端,伪终端,控制终端,控制台终端的理解

    转自Linux 串行终端,虚拟终端,伪终端,控制终端,控制台终端的理解 终端:输入和输出设备(键盘 + 显示器). 串行终端:与机器的串口对应,每一个串口对应一个串行终端,串口对应的是物理终端. 虚拟 ...

  8. 转载:redis备份策略

    Redis提供了两种持久化选项,分别是RDB和AOF. 默认情况下60秒刷新到disk一次[save 60 10000 当有1w条keys数据被改变时],Redis的数据集保存在叫dump.rdb一个 ...

  9. 绕过kernel模块版本校验检测

    kernel module version check bypass . 举例说明 . 内核是怎么实现的 . 怎样去突破 . 总结 . 举例说明 Linux内核版本很多,升级很快,2个小内核版本中内核 ...

  10. hdu4597Play Game(记忆化)

    链接 通化邀请赛的题 貌似不怎么难 记忆化DP 状态方程类似于2维的 只是变成了4维  每次有四种方向去搜 取最棒的 判断好边界条件 #include <iostream> #includ ...