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

2、应用:

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

3、值：

　　

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

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

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>元素float</title>

     <style>

         a{

             background-color: #ff0;

             width:200px;

             height:200px;

             float:left;

         }

     </style>

 </head>

 <body>

     这是一个<a href="#">超级链接</a>

 </body>

 </html>

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>图文环绕的演示</title>

     <style>

         div{

             width:800px;

             border:3px solid red;

             margin:30px auto;

         }

         div img{

             float: right;

             margin-left: 20px;

             margin-bottom: 10px;

         }

         div h3.div h6,div p{

             background-color:#ccc;

         }

         div p{

             height: 200px;

         }

     </style>

 </head>

 <body>

     <div>

         <img src="./suihua.png" width="200px" height="200px"/>

         <h3>歌词</h3>

         <h6>三生三世十里桃花</h6>

         <h6>男女合唱版</h6>

         <p>入夜渐微凉 繁花落地成霜 你在远方眺望 耗尽所有暮光 不思量自难相忘 夭夭桃花凉 前世你怎舍下

             这一海心茫茫 还故作不痛不痒不牵强 都是假象凉凉夜色为你思念成河化作春泥呵护着我浅浅岁月拂满爱人袖片片芳菲入水流

             凉凉天意潋滟一身花色落入凡尘伤情着我生劫易渡情劫难了折旧的心还有几分前生的恨还有几分</p>

     </div>

 </body>

 </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. DeepFM算法解析及Python实现

    1. DeepFM算法的提出 由于DeepFM算法有效的结合了因子分解机与神经网络在特征学习中的优点:同时提取到低阶组合特征与高阶组合特征,所以越来越被广泛使用. 在DeepFM中,FM算法负责对一阶 ...

  2. Python学习之路（一）之Python基础1

    目录 Python基础初识 1.Python介绍 1.1.Python简介 1.2.Python特点 1.3.Python应用领域 1.4.Python解释器的种类 2.Python基础初识 2.1. ...

  3. CodeForces 1073F Choosing Two Paths

    Description You are given an undirected unweighted tree consisting of \(n\) vertices. An undirected ...

  4. [THUSC2017]巧克力[斯坦纳树、随机化]

    题意 题目链接 分析 对于第一问,如果颜色数量比较少的话可以 \(\binom{cnt}{k}\) 枚举最终连通块中的 \(k\) 种颜色,然后利用斯坦纳树求解. 如果颜色比较多,考虑将所有的颜色重新 ...

  5. 面向 Photoshop 的英特尔® Texture Works 插件

    英特尔对 Photoshop* 进行了扩展,以通过插件充分利用最新的图像压缩方法 (BCn/DXT).该插件旨在为图形工作者提供一款获取卓越压缩结果的工具,并提高 Photoshop* 中的压缩速度. ...

  6. unity音量设置（同时设置到多个物体上）——引伸语言设置

    在游戏中游戏设置是一个很重要的功能,但是比如语言设置和音量设置分散在很多个物体的组件上,如果每个对应的物体都放到一个链表里,会导致程序雍总难堪,使用事件调用是最好的方式 音量存储类 SoundMana ...

  7. arduino驱动安装

    方法一:使用官方提供的一键安装程序安装 打开Arduino在你电脑上的位置如果你的电脑是32位系统,就运行dpinst-x86.exe如果是64位系统,就运行dpinst-amd64.exe然后在弹出 ...

  8. 毕业回馈-89c52之最小系统

    今天分享一个51单片机最小系统的电路板设计(原理图+PCB) 技术手册上面对于51单片机最小系统作如下要求: 下载电路主要有以下几种: 采用RS-232转换器下载:(R1OUT-P3.0;T1IN-P ...

  9. 无前趋的顶点优先的拓扑排序方法(JAVA)(转载http://128kj.iteye.com/blog/1706968)

    无前趋的顶点优先的拓扑排序方法 该方法的每一步总是输出当前无前趋(即人度为零)的顶点,其抽象算法可描述为:     NonPreFirstTopSort(G){//优先输出无前趋的顶点       w ...

  10. 20135202闫佳歆--week6 进程的描述与创建--学习笔记

    此为个人学习笔记存档! week 6 进程的描述与创建 一.进程的描述 1.进程控制块task_struct 以下内容来自视频课件,存档在此. 为了管理进程,内核必须对每个进程进行清晰的描述,进程描述 ...