【CSS】float属性
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属性的更多相关文章
- 详解CSS float属性（转）
详解CSS float属性 阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 清除浮动 float的应用 总结 CSS中的float属性是一个频繁用到的属性,对于初学者 ...
- 关于css float 属性以及position:absolute 的区别。
1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块 ...
- CSS——float属性备忘笔记
通过指定CSS属性float的值,从而使元素向左或向右浮动,然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间.CSS的float属性,作用就是改变块元素对象的默认显示方式,HTML标签设置了 ...
- CSS float 属性
Float定义: float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动. 浮动元素会生成一个块级框,而不论它本身是何种元素.如 ...
- 详细分析css float 属性以及position:absolute 的区别
1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块 ...
- 详解CSS float属性
CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态.本文将从最基本的知识开始说起,谈谈关于浮动的 ...
- css float属性详解
定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.如果浮动非 ...
- CSS float属性
表示向左浮动,比如多个div在一个页面上,默认情况是:一行一个div,但是只要在div的css中使用float:left,可以使一行有多个div,这样可以把网页划分成很多块,但是使用该属性会影响后面的 ...
- JS控制css float属性的用法经验总结
JavaScript与CSS属性的控制网上很常见,因此来说用js操作css属性是有一定规律的. 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin ...
- CSS float和position属性
1. 浮动 CSS float属性定义了元素在水平方向的浮动.该元素从网页的正常流动(文档流)中移除,对于浮动元素后的块级元素,块级元素将会被浮动元素覆盖,并且会接着其上一个文档流中的元素,按文档流的 ...
随机推荐
- 汇编 XOR运算
XOR运算 按位异或^ 一.按位异或^ 运算符^ 1^1=0;0^0=0; //相同则为0 0^1=1;1^0=1; //不相同为1 1101^0110=1011; // asm_XOR.c ...
- PowerBI开发 第三篇：报表设计技巧
最近做了几个PowerBI报表,对PowerBI的设计有了更深的理解,对数据的塑形(sharp data),不仅可以在Data Source中实现,例如在TSQL查询脚本中,而且可以在PowerBI中 ...
- Markdown打造高逼格博客
这里首先假设读者你已经掌握了Markdown与GitHub的基本用法 如果不会, 请先自行百度或Google, 我目前还没写Markdown与GitHub的教程 看云只是一个推荐, 可以认为协助生成格 ...
- MQ见解
MQ 消息队列是系统级.模块级的通信.RPC是对象级.函数级通信. 1) 什么是推模式,什么是拉模式 2) 有没有消息丢失情况,如何防止 3) MQ用来解决什么问题 4) 你们用的什么MQ,为什么要用 ...
- elasticsearch6.6.0安装配置及elasticsearch-head插件安装
一.最小化安装centos7.6 cat /etc/redhat-release 二.配置网络,可以上外网 三.安装常用命令工具,修改系统时区,校对系统时间,关闭selinux,关闭firewalld ...
- Daily Scrumming* 2015.12.8（Day 1）
一.团队scrum meeting照片 二.今日总结 姓名 WorkItem ID 工作内容 签入链接以及备注说明 江昊 任务942 学习使用github,在github上建立组织并将所有队员纳入, ...
- Linux内核分析 笔记二 操作系统是如何工作的 ——by王玥
一.知识要点 1.计算机是如何工作的?(总结)——三个法宝 存储程序计算机工作模型,计算机系统最最基础性的逻辑结构: 函数调用堆栈,高级语言得以运行的基础,只有机器语言和汇编语言的时候堆栈机制对于计算 ...
- [BUG随想录] expat不兼容BUG
本周五软工团队项目的第一次前后端全部对接时,出了一个蛋疼的错误. 最初起因是小丽叔出于安全的考虑,使用守护进程来跑Web服务器.守护进程(Daemon)是运行在后台的一种特殊进程,如果服务器用root ...
- struts2中的方法的调用
转载:http://blog.csdn.net/hephec/article/details/41808585 在Struts2中方法调用概括起来主要有三种形式: 第一种方式:指定method属性 & ...
- [转帖]2019 简易Web开发指南
2019 简易Web开发指南 2019年即将到来,各位同学2018年辛苦了. 不管大家2018年过的怎么样,2019年还是要继续加油的! 在此我整理了个人认为在2019仍是或者将成为主流的技术 ...