[TimLinux] CSS float和position详解
1.1. 定义
摘自w3school：float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
1.2. 关键点
从上面的定义，分析几个关键点：
- float是可以独立存在的，与position没有关系，很多文章讲解的时候，并没有独立讲解float的功能；
- float可以作用与替换元素(img)，也可以作用以非替换元素(p, span)；
- float属性设置了之后，元素的display性质变为block了，可以设置宽度，高度，margin, padding属性等；
- float之后，元素还在父元素内，不会脱离父元素，left值相对的是父元素的左边框（padding值有效）。
1.3. 示例
1.3.1. 行内元素示例
设置float: left之前：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>浮动 float属性</title>
<style>
p {
padding-left: 50px;
padding-right: 50px;
border: 1px solid red;
}
.span1 {
color: blue;
font-weight: bold;
border: 1px solid blue;
}
.span2 {
color: red;
font-weight: bold;
border: 1px solid yellow;
}
</style>
</head>
<body>
<p>这是一段比较长的文字，<span class="span1">目的是用来演示浮动</span>功能对行类元素的影响，当前这<span class="span2">段文件包含在p标签内，里面包含有</span>span元素，不要看这段文字的含义，我只是为了构造一段更长的文字而已！</p>
</body>
</html>
现在给第一个span (目的是用来演示浮动) 设置float: left
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>浮动 float属性</title>
<style>
p {
padding-left: 50px;
padding-right: 50px;
border: 1px solid red;
}
.span1 {
color: blue;
font-weight: bold;
border: 1px solid blue;
float: left;
width: 300px;
height: 40px;
padding: 10px;
left: 20px; /* 无效 */
top: 20px; /* 无效 */
}
.span2 {
color: red;
font-weight: bold;
border: 1px solid yellow;
}
</style>
</head>
<body>
<p>这是一段比较长的文字，<span class="span1">目的是用来演示浮动</span>功能对行类元素的影响，当前这<span class="span2">段文件包含在p标签内，里面包含有</span>span元素，不要看这段文字的含义，我只是为了构造一段更长的文字而已！</p>
</body>
</html>
设置float: right
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>浮动 float属性</title>
<style>
p {
padding-left: 50px;
padding-right: 50px;
border: 1px solid red;
}
.span1 {
color: blue;
font-weight: bold;
border: 1px solid blue;
float: right;
width: 300px;
height: 35px;
padding: 10px;
left: 20px; /* 无效 */
top: 20px; /* 无效 */
}
.span2 {
color: red;
font-weight: bold;
border: 1px solid yellow;
}
</style>
</head>
<body>
<p>这是一段比较长的文字，<span class="span1">目的是用来演示浮动</span>功能对行类元素的影响，当前这<span class="span2">段文件包含在p标签内，里面包含有</span>span元素，不要看这段文字的含义，我只是为了构造一段更长的文字而已！</p>
</body>
</html>
第二个span设置为float：left
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>浮动 float属性</title>
<style>
p {
padding-left: 50px;
padding-right: 50px;
border: 1px solid red;
}
.span1 {
color: blue;
font-weight: bold;
border: 1px solid blue;
}
.span2 {
color: red;
font-weight: bold;
border: 1px solid yellow;
float: left;
}
</style>
</head>
<body>
<p>这是一段比较长的文字，<span class="span1">目的是用来演示浮动</span>功能对行类元素的影响，当前这<span class="span2">段文件包含在p标签内，里面包含有</span>span元素，不要看这段文字的含义，我只是为了构造一段更长的文字而已！</p>
</body>
</html>
设置span1和span2，左右浮动：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>浮动 float属性</title>
<style>
p {
padding-left: 50px;
padding-right: 50px;
border: 1px solid red;
}
.span1 {
color: blue;
font-weight: bold;
border: 1px solid blue;
float: left;
}
.span2 {
color: red;
font-weight: bold;
border: 1px solid blue;
float: right;
}
</style>
</head>
<body>
<p>这是一段比较长的文字，<span class="span1">目的是用来演示浮动</span>功能对行类元素的影响，当前这<span class="span2">段文件包含在p标签内，里面包含有</span>span元素，不要看这段文字的含义，我只是为了构造一段更长的文字而已！</p>
</body>
</html>
1.3.2. 块级元素示例
正常结构：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>浮动 float 属性</title>
<style>
.top {
background-color: #EEE;
width: 500px;
height: 300px;
border: 1px solid blue;
}
.div1 {
background-color: #000;
color: #FFF;
width: 220px;
height: 120px;
}
.div2 {
background-color: blue;
color: #FFF;
width: 250px;
height: 80px;
}
.div3 {
background-color: red;
color: #FFF;
width: 300px;
height: 50px;
}
</style>
</head>
<body>
<div class="top">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
</body>
</html>
第一个元素右浮动：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>浮动 float 属性</title>
<style>
.top {
background-color: #EEE;
width: 500px;
height: 300px;
border: 1px solid blue;
}
.div1 {
background-color: #000;
color: #FFF;
width: 220px;
height: 120px;
float: right;
}
.div2 {
background-color: blue;
color: #FFF;
width: 250px;
height: 80px;
}
.div3 {
background-color: red;
color: #FFF;
width: 300px;
height: 50px;
}
</style>
</head>
<body>
<div class="top">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
</body>
</html>
第一、二个元素右浮动：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>浮动 float 属性</title>
<style>
.top {
background-color: #EEE;
width: 500px;
height: 300px;
border: 1px solid blue;
}
.div1 {
background-color: #000;
color: #FFF;
width: 220px;
height: 120px;
float: right;
}
.div2 {
background-color: blue;
color: #FFF;
width: 250px;
height: 80px;
float: right;
}
.div3 {
background-color: red;
color: #FFF;
width: 300px;
height: 50px;
}
</style>
</head>
<body>
<div class="top">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
</body>
</html>
第一、二、三个元素右浮动：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>浮动 float 属性</title>
<style>
.top {
background-color: #EEE;
width: 500px;
height: 300px;
border: 1px solid blue;
}
.div1 {
background-color: #000;
color: #FFF;
width: 220px;
height: 120px;
float: right;
}
.div2 {
background-color: blue;
color: #FFF;
width: 250px;
height: 80px;
float: right;
}
.div3 {
background-color: red;
color: #FFF;
width: 300px;
height: 50px;
float: right;
}
</style>
</head>
<body>
<div class="top">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
</body>
</html>
设置left, right, top, bottom, 并给父div设置padding试下效果：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>浮动 float 属性</title>
<style>
.top {
background-color: #EEE;
width: 500px;
height: 300px;
border: 5px solid blue;
padding: 10px;
}
.div1 {
background-color: #000;
color: #FFF;
width: 220px;
height: 120px;
float: right;
right: 20px;
top: -10px;
}
.div2 {
background-color: blue;
color: #FFF;
width: 250px;
height: 80px;
}
.div3 {
background-color: red;
color: #FFF;
width: 300px;
height: 50px;
}
</style>
</head>
<body>
<div class="top">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
</body>
</html>
1.4. clear属性（待讲清楚）
clear属性用于清除浮动，很多文档解释不清楚，我的理解，clear主要体现三点：
- clear的效果是作用在设置了clear属性的元素上
- ？
- ？
2. position详解
定义：规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。分解为以下几点：
- 支持的常用属性值：static(默认)，relative，absolute，fixed。
- absolute，fixed会将定位元素变为块级元素，脱离正常文本流
- relative相当元素在正常文本流中的位置进行偏移，未脱离正常文本流，原位置保留。
- 设置了除static外的值时，left, right, top, bottom, z-index设置的值有效果，默认z-index值大于-1(-1为正常文本流所在图层)
- 当只设置了：relative, absolute, fixed，但是没有设置任何left, right, top, bottom时，元素位置不会变，不脱离/脱离/脱离 正常文本流。
2.1. fixed介绍
- left，top，bottom，right，设置的值分别对应浏览器窗口的左边框，顶部边框（显示内容区，不含地址栏，导航栏这些内容），底部边框（不含工具栏），右边框，正数表示值在浏览器窗口内，负数表示浏览器窗口外（不可见）。
- 不论元素之前的结构，所在的位置在哪里，它都会脱离原来的位置，脱离正常文本流，来到上层世界。
- 不受浏览器滚动条的影响，永远固定在浏览器可视区域相对边框的位置
2.2. absolute介绍
- 相对一个‘根’元素进行的‘固定’定位；
- ‘根’元素：
- 在DOM结构中，离该元素最近的一个祖先元素（兄弟元素不认）；
- 设置了absolute, relative，fixed定位值的元素；
- 找到body都没有找到这样的元素，则把body设为这样的元素。
- left, top, bottom, right 设置的值为元素margin最外侧相对根元素border的内测（不受padding值的影响）的距离
2.3. relative介绍
- 元素在设置该值之前，在文本流中存在一个位置
- 设置该值之后，不脱离文本流，也不变动位置
- 设置了left, top, bottom, right值后，相对在正常文本流中的位置进行偏移，正数为朝属性含义相反方向移动，如left(左): 10px; 左的相反方向，则向右移动10px。
- 元素是整体移动，所以选择一个点来计算即可，可以前后都选定border最外侧来计算距离，其他方式都可以，只是因为border可以设置一个可见的边，方便调试。
2.4. 示例
fixed的示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>浮动 float 属性</title>
<style>
.top {
background-color: #EEE;
width: 500px;
height: 300px;
border: 5px solid blue;
padding: 5px;
}
.div1 {
background-color: #000;
color: #FFF;
width: 120px;
height: 120px;
}
.div2 {
background-color: yellow;
border: 20px solid red;
padding: 10px;
color: #FFF;
width: 150px;
height: 80px;
position: fixed;
right: 50px;
bottom: 50px;
}
.div3 {
background-color: red;
color: #FFF;
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<div class="top">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
</body>
</html>
absolute的示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>浮动 float 属性</title>
<style>
.top {
background-color: #EEE;
width: 500px;
height: 300px;
border: 50px solid blue;
padding: 5px;
position: relative;
}
.div1 {
background-color: #000;
color: #FFF;
width: 120px;
height: 120px;
}
.div2 {
background-color: yellow;
border: 20px solid red;
padding: 10px;
color: #FFF;
width: 150px;
height: 80px;
position: absolute;
right: -50px;
bottom: -50px;
margin: 25px;
}
.div3 {
background-color: red;
color: #FFF;
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<div class="top">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
</body>
</html>
relative的示例:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>浮动 float 属性</title>
<style>
.top {
background-color: #EEE;
width: 500px;
height: 300px;
border: 50px solid blue;
padding: 5px;
position: relative;
}
.div1 {
background-color: #000;
color: #FFF;
width: 120px;
height: 120px;
}
.div2 {
background-color: yellow;
border: 20px solid red;
padding: 10px;
color: #FFF;
width: 150px;
height: 80px;
position: relative;
left: 25px;
top: 25px;
}
.div3 {
background-color: red;
color: #FFF;
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<div class="top">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
</body>
</html>
3. position与float结合
- float属性的加入，只会对relative定位有影响；
- 影响的内容：
- relative原本不脱离文本流，float加入之后，脱离了，原来位置删除了；
- left, right, top, bottom值的含义变了：之前为相对元素自身原来的位置，现在就复杂了：
- 在自身原来位置：顶部、底部分别画两条水平线，top， bootom为相对上、下水平线的位置，正数反含义偏移，负数同含义偏移。
- left，right：相对父元素内边距(padding)的内测的距离。
- 前面的元素：不影响前面的正常文本流结构布局（在这个元素之前的元素是什么样，现在还是什么样。）
- 后面的元素：
- 正常流元素：把该元素删掉的坑给占了，按正常文本流方式占坑；
- 也是一个float：同方向float，则贴合上去，后面元素的left, right为紧贴元素未设置left，right，top，bottom之前的位置
- 情况复杂多变，具体还是要在应用中多调试，可以通过设置边框，颜色，背景色手段来检验。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>浮动 float 属性</title>
<style>
.top {
background-color: #EEE;
width: 500px;
height: 300px;
border: 50px solid blue;
padding: 5px;
position: relative;
}
.div1 {
background-color: #000;
color: #FFF;
width: 120px;
height: 120px;
}
.div2 {
background-color: yellow;
border: 20px solid red;
padding: 10px;
color: #FFF;
width: 150px;
height: 80px;
position: relative;
float: left;
left: 10px;
bottom: 10px;
}
.div3 {
background-color: red;
border: 1px solid blue;
color: #FFF;
width: 100px;
height: 50px;
position: relative;
float: left;
}
</style>
</head>
<body>
<div class="top">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
</body>
</html>
[TimLinux] CSS float和position详解的更多相关文章
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
- CSS定位之position详解(转载)
本文转载于xingoo的博文:http://www.cnblogs.com/xing901022/p/5193751.html position属性 在前端中,position是很常见的属性.通过这 ...
- CSS定位之position详解
position属性 在前端中,position是很常见的属性.通过这个属性可以调整dom元素在浏览器中显示的位置. 它有几个常用的属性: static 默认值.通常是在覆盖absolute或者rel ...
- html5的float属性超详解（display，position， float）（文本流）
html5的float属性超详解(display,position, float)(文本流) 一.总结 1.文本流: 2.float和绝对定位都不占文本流的位置 3.普通流是默认定位方式,就是依次按照 ...
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- css过渡和2d详解及案例
css过渡和2d详解及案例(案例在下方,不要着急) 本文重点: 1.在2D变化使用过程中,有些需求需要两种或两种以上的变化同时使用, 值得注意的是尽量把位移变化放在最前面,把其他变化放在最后面,属性值 ...
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...
- css样式继承规则详解
css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
- Css盒模型属性详解（margin和padding）
Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...
随机推荐
- 003.Kubernetes二进制部署准备
一 前置准备 1.1 前置条件 相应的充足资源的Linux服务器: 设置相应的主机名,参考命令: hostnamectl set-hostname k8smaster Mac及UUID唯一: 若未关闭 ...
- css3mask淡出文字
css3mask淡出文字<pre>.p0_11wrap { width: 0.299rem; height: 7.68rem; overflow: hidden; background: ...
- iOS：应用程序扩展开发之Today扩展（Today Extesnsion）
一.简介 iOS应用程序扩展是苹果在iOS8推出的一个新特性,可以将自定义的功能和内容扩展到应用程序之外,在之后又经过不断地优化和更新,已经成为开发中不可或缺的功能之一.扩展也是一个Target项目, ...
- Spring-boot构建多模块依赖工程时，maven打包异常：程序包xxx不存在
在qizhi项目改版的时候, 所有代码都迁移好了, 但是compile的时候报程序包*****不存在, 具体到某一个类就是: 找不到符号. 下面这篇文章是正解 http://hbxflihua.ite ...
- 领扣（LeetCode）回文链表 个人题解
请判断一个链表是否为回文链表. 示例 1: 输入: 1->2 输出: false 示例 2: 输入: 1->2->2->1 输出: true 进阶:你能否用 O(n) 时间复杂 ...
- Lab8：文件系统
文件系统的概念 文件系统是操作系统中管理持久性数据的子系统,提供数据存储和访问功能 文件是具有符号名,由字节序列构成的数据项集合 文件系统的功能 分配文件磁盘空间 管理文件块(位置和顺序) 管理空闲空 ...
- 读取FANUC进给倍率
读取FANUC机床的倍率信息需要用到 FOCAS链接库. 根据FANUC的连接手册可以知道,进给倍率信号存在 Gn012寄存器中.在机床上更改倍率开关,发现G0012寄存器值变化,经验证G0012就是 ...
- 新闻实时分析系统-Hadoop2.X分布式集群部署
(一)hadoop2.x版本下载及安装 Hadoop 版本选择目前主要基于三个厂商(国外)如下所示: 1.基于Apache厂商的最原始的hadoop版本, 所有发行版均基于这个版本进行改进. 2.基于 ...
- day29 文件的上传和下载 socketserver（并发）
文件上传的讲解: import subprocess res=subprocess.Popen("dir", shell=True, stderr=subprocess.PIPE, ...
- css之文本两端对齐的两种解决方法
说起文本对齐,大家都知道text-align,最常用的有left.right.center,今天我们说一下justify,也就是文本两端 对齐.说起来简单,但是有些小坑大家还是要注意的. 现在我们有这 ...