宏观地讲,我们的web页面的制作,是个“流”,必须从上而下,像“织毛衣”。
 
标准流里面的限制非常多,导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高,那该怎么办呢?办法是:超脱!脱离标准流!
 
浮动是css里面布局用的最多的属性。
 
 
 
现在有两个div,分别设置宽高。我们知道,它们的效果如下:
 
 
此时,如果给这两个div增加一个浮动属性,比如float: left;,效果如下:
 
 
这就达到了浮动的效果。此时,两个元素并排了。(这在标准流中,不能实现)。
 
浮动想学好,一定要知道四个性质。接下来讲一讲。

性质1:浮动的元素脱标

脱标即脱离标准流。我们来看一个例子。
 
 
上图中,在默认情况下,两个div标签是上下进行排列的。现在由于float属性让上图中的第一个<div>标签出现了浮动,于是这个标签在另外一个层面上进行排列。而第二个<div>还在自己的层面上遵从标准流进行排列。
 
 

性质2:浮动的元素互相贴靠

我们来看一个例子就明白了。
我们给三个div均设置了float: left;属性之后,然后设置宽高。可以看到div的贴靠效果:
 

性质3:浮动的元素有“字围”效果

来看一张图就明白了。我们让div浮动,p不浮动
 
上图中,我们发现:div挡住了p,但不会挡住p中的文字,形成“字围”效果。
 
 

性质4:收缩

收缩:一个浮动的元素,如果没有设置宽高,那么将自动收缩为内容的宽高(这点非常像行内元素)。
div设置宽高:
 
div不设置宽高:
 
 
上图中,div本身是块级元素,如果不设置widh,它会单独霸占整行;但是,设置div浮动后,它会收缩
 
 
至此,在单独使用浮动时的一些特点就结束啦!!!当然,实际开发时,更多是浮动后带来的问题,我们下次再细说。
【逆战】
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

CSS基础之浮动属性float图文详解的更多相关文章

  1. 对css中的浮动属性float刨根解牛

    1.浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 脱离常规流,由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 2.几张图说明浮动常 ...

  2. CSS样式----CSS属性:字体属性和文本属性(图文详解)

    本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定 ...

  3. CSS样式----css样式表和选择器(图文详解)

    本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样 ...

  4. CSS属性:定位属性(图文详解)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. CSS的定位属性有三种,分别是绝对定位.相对定位.固定定位. posit ...

  5. CSS属性:背景属性(图文详解)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. background系列属性 常见背景属性 CSS样式中,常见的背景属性 ...

  6. CSS基础(七):z-index详解

    概念 z-index 属性设置元素的堆叠顺序.拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面. 层级关系的比较 1. 对于同级元素,默认(或position:static)情况下文档流后面的 ...

  7. CSS选择器:伪类(图文详解)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式. ...

  8. CSS3 transform的skew属性值图文详解

    我刚刚接触transform的skew属性值时一头雾水,根本不知道种东西到底是咋变的.上网查,各个网站上也只说这个使用来做扭曲变换的,具体是咋变的就是不说....无奈我只好自己研究了,现把研究结果共享 ...

  9. CSS背景图像位置属性background-position百分比详解

    百分比值同关键字很接近,但其操作方式不一样.用百分比值来居中一幅背景图像,也很简单: body { background-image;url(beijing.gif); background-repe ...

随机推荐

  1. Python 编程入门(1):基本数据类型

    以下所有例子都基于最新版本的 Python,为了便于消化,每一篇都尽量短小精悍,希望你能尽力去掌握 Python 编程的「概念」,可以的话去动手试一下这些例子(就算目前还没完全搞懂),加深理解. 程序 ...

  2. linux文件、文件夹操作

    1. pwd   查看当前所在的路径 2. ls   显示文件列表 ls -l   显示文件列表以及详情 ls -la   显示所有文件列表以及详情(包含隐藏文件) 注意:ls -l 相当于ll 例如 ...

  3. c# 异步编程总结

    异步编程前提 1.学委托 delegate 其中委托中的beginInvoke()和endInvoke()方法必须要会. 2.学习回调函数 (也可以不用,但是一般建议用回调函数中执行endinvoke ...

  4. Treap总结

    \(Treap = Tree + Heap\) 树堆(Treap),在数据结构中也称Treap,是指有一个随机附加域满足堆的性质的二叉搜索树,其结构相当于以随机数据插入的二叉搜索树.其基本操作的期望时 ...

  5. js内置对象的常用属性和方法(Array | String | Date | Math)

    js内置对象:Array  String  Math  Date <!DOCTYPE html> <html lang="en"> <head> ...

  6. chorme输入框autocomplete(移动端)

    输入框自动填充密码即使是type是text也别填充,尝试了 https://developer.mozilla.org/zh-CN/docs/Web/Security/Securing_your_si ...

  7. 消息队列MQ如何保证高可用性?

    保证MQ的高可用性,主要是解决MQ的缺点--系统复杂性变高--带来的问题 主要说一下  rabbitMQ  和  kafka  的高可用性 一.rabbitMQ的高可用性 rabbitMQ是基于主从做 ...

  8. Wannafly Winter Camp 2020 Day 6A Convolution - NTT

    求 \(\sum_{i=1}^n \sum_{j=1}^n 2^{a_ia_j}\) Solution 化简一下 \[ 2^{a_ia_j} = p^{(a_i+a_j)^2-a_i^2-a_j^2} ...

  9. phpcms搜索给分页代码添加参数方法

    在使用PHPCMS开发网站时遇到了一个搜索功能,需要在搜索结果分页链接上添加一些传递的参数,不然不能够正确翻页. 方法: 找到\phpcms\libs\functions\global.func.ph ...

  10. WinForm WebBrowser 设置IE版本

    public enum IeVersion { IE7 = , IE8 = , IE9 = , IE10 = , IE11 = }; /// <summary> /// 修改注册表信息来兼 ...