float浮动属性
1、作用:
　　将页面元素浮动起来，使其能够向左或者向右排列

2、应用:

　　实现页面中布局的左右排版
　　实现图文环绕的版式效果

3、值：

　　

4、原理:
浮动元素将脱离默认的文档流，漂浮在默认文档流之上
浮动的元素会向左或向右移动，直到它的外边缘碰到父级元素或这个元素之前的另一个浮动元素的边框为止

普通文档流可以看作是一个X、Y轴的平面流，float浮动流可以看到是一个Z轴上的立体流，Float浮动流离眼睛更近，在普通文档流之上

5、特点:
　　对齐方式
　　　　不管元素如何浮动，始终以父级容器或它前面同层次并列的元素作为参考进行对齐。
　　盒模型的应用
　　　　一旦元素浮动起来，就可以直接适用CSS盒子模型属性。(因为行间元素float起来以后，它会脱离默认文档流的行间限制)
　　　　比如给<a></a>元素设置width和height，无效果，让<a></a>先float起来，然后设置width、height，就有效果。

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>元素float</title>
  6.      <style>
  7.          a{
  8.              background-color: #ff0;
  9.              width:200px;
  10.              height:200px;
  11.              float:left;
  12.          }
  13.      </style>
  14.  </head>
  15.  <body>
  16.      这是一个<a href="#">超级链接</a>
  17.  </body>
  18.  </html>

　　对内容的影响
　　　　尽管浮动元素脱离了默认文档流，但仍然会影响到默认文档流中的盒子里面装的“内容”(图文)，这些“内容”会给浮动元素留出占位。PS:图文环绕的版式效果就是这么得来的...

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>图文环绕的演示</title>
  6.      <style>
  7.          div{
  8.              width:800px;
  9.              border:3px solid red;
  10.              margin:30px auto;
  11.          }
  12.  
  13.          div img{
  14.              float: right;
  15.              margin-left: 20px;
  16.              margin-bottom: 10px;
  17.          }
  18.  
  19.          div h3.div h6,div p{
  20.              background-color:#ccc;
  21.          }
  22.          div p{
  23.              height: 200px;
  24.          }
  25.      </style>
  26.  </head>
  27.  <body>
  28.      <div>
  29.          <img src="./suihua.png" width="200px" height="200px"/>
  30.          <h3>歌词</h3>
  31.          <h6>三生三世十里桃花</h6>
  32.          <h6>男女合唱版</h6>
  33.          <p>入夜渐微凉 繁花落地成霜 你在远方眺望 耗尽所有暮光 不思量自难相忘 夭夭桃花凉 前世你怎舍下
  34.              这一海心茫茫 还故作不痛不痒不牵强 都是假象凉凉夜色为你思念成河化作春泥呵护着我浅浅岁月拂满爱人袖片片芳菲入水流
  35.              凉凉天意潋滟一身花色落入凡尘伤情着我生劫易渡情劫难了折旧的心还有几分前生的恨还有几分</p>
  36.      </div>
  37.  </body>
  38.  </html>

【CSS】float属性的更多相关文章

  1. 详解CSS float属性（转）

    详解CSS float属性   阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 清除浮动 float的应用 总结 CSS中的float属性是一个频繁用到的属性,对于初学者 ...

  2. 关于css float 属性以及position:absolute 的区别。

    1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块 ...

  3. CSS——float属性备忘笔记

    通过指定CSS属性float的值,从而使元素向左或向右浮动,然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间.CSS的float属性,作用就是改变块元素对象的默认显示方式,HTML标签设置了 ...

  4. CSS float 属性

    Float定义: float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动. 浮动元素会生成一个块级框,而不论它本身是何种元素.如 ...

  5. 详细分析css float 属性以及position:absolute 的区别

    1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块 ...

  6. 详解CSS float属性

    CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态.本文将从最基本的知识开始说起,谈谈关于浮动的 ...

  7. css float属性详解

    定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.如果浮动非 ...

  8. CSS float属性

    表示向左浮动,比如多个div在一个页面上,默认情况是:一行一个div,但是只要在div的css中使用float:left,可以使一行有多个div,这样可以把网页划分成很多块,但是使用该属性会影响后面的 ...

  9. JS控制css float属性的用法经验总结

    JavaScript与CSS属性的控制网上很常见,因此来说用js操作css属性是有一定规律的. 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin ...

  10. CSS float和position属性

    1. 浮动 CSS float属性定义了元素在水平方向的浮动.该元素从网页的正常流动(文档流)中移除,对于浮动元素后的块级元素,块级元素将会被浮动元素覆盖,并且会接着其上一个文档流中的元素,按文档流的 ...

随机推荐

  1. mfc c++字符串类与 流输出

    一.命名空间 所谓命名空间(namespace),是指标识符的各种可见范围.C++标准程序库中的所有标识符都被定义于一个名为std的命名空间(namespace)中.而我们要使用的string类也是一 ...

  2. 带阴影的圆形 QLabel

    带阴影的圆形 Label 来自: 公孙二狗

  3. 洛咕 P3700 [CQOI2017]小Q的表格

    洛咕 P3700 [CQOI2017]小Q的表格 神仙题orz 首先推一下给的两个式子中的第二个 \(b\cdot F(a,a+b)=(a+b)\cdot F(a,b)\) 先简单的想,\(F(a,a ...

  4. SQLServer数据库还原：无法在已有的mdf文件上还原文件

    如果提示无法在已有的mdf文件上还原文件,请修改如下位置

  5. 我是SPI，我让框架更加优雅了！

    文章首发于[陈树义的博客],点击跳转到原文<我是 SPI,我让框架更加优雅了!> 自从上次小黑进入公司的架构组之后,小黑就承担起整个公司底层框架的开发工作.就在刚刚,小黑又接到一个任务:做 ...

  6. vuex实践之路——笔记本应用（三）

    Actions Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态. Action 可以包含任意异步操作. 让我们来注册一个简单的 act ...

  7. Linux 僵尸进程

    Linux 允许进程查询内核以获得其父进程的 PID,或者其任何子进程的执行状态.例如,进程可以创建一个子进程来执行特定的任务,然后调用诸如 wait() 这样的一些库函数检查子进程是否终止.如果子进 ...

  8. NameNode内存溢出和DataNode请求超时异常处理

    问题背景 春节假期间,接连收到监控程序发出的数据异常问题,赶忙连接上跳板机检查各服务间的状态,发现Datanode在第二台.第三台从节点都掉线了,通过查看Datanode和Namenode运行日志,发 ...

  9. LeetCode-3.无重复字符的最长字串

    给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 1: 输入: "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc&qu ...

  10. 1085. Perfect Sequence (25)-水题

    #include <iostream> #include <cstdio> #include <algorithm> #include <string.h&g ...