css的float和position属性
（1）float的简单用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width: 200px;
height: 50px;
background-color: aqua;
}
.div2{
width: 250px;
height: 100px;
background-color: red;
float: left;
}
/*如果加了float，则div3会被div2覆盖，因为div2设置了向左漂浮，会接着找上一个div1的尾部进行漂浮，叫重叠样式表*/
.div3{
width: 300px;
height: 150px;
background-color: violet;
}
.div4{
width: 450px;
height: 250px;
background-color: blue;
} </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div> </body>
</html>
结果如图
如若div2和div3都设置了向左浮动，结果如图
如果div3加了clear：left，则不会放在div右边了，会在下面，也就是当div2不是浮动对象了
（2）position属性
1、fixed表示固定位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width: 200px;
height: 50px;
background-color: aqua;
position: fixed;
}
/*static一般情况都是默认按这种情况，所以加不加都没影响这里*/
/*fixed表示固定位置，也是脱离了文档流，覆盖别的标签*/
.div2{
width: 250px;
height: 100px;
background-color: red; } .div3{
width: 300px;
height: 150px;
background-color: violet; }
.div4{
width: 450px;
height: 250px;
background-color: blue;
} </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div> </body>
</html>
效果如图
2、relative表示根据自己之前的位置进行调整
如图
css的float和position属性的更多相关文章
- CSS float和position属性
1. 浮动 CSS float属性定义了元素在水平方向的浮动.该元素从网页的正常流动(文档流)中移除,对于浮动元素后的块级元素,块级元素将会被浮动元素覆盖,并且会接着其上一个文档流中的元素,按文档流的 ...
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- CSS学习笔记——定位position属性的学习
今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什 ...
- [转]总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- CSS之float vs position:absolute
补充:ul 应该设置下 list-style: none; 题外话:看了张鑫旭的视频,这家伙把简单的css玩出了新花样,绝对大神级的存在.膜拜下先~ float的作用前面一章已经说过了,但没考虑过的是 ...
- DIV CSS布局中position属性用法深入探究
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...
- DIV-CSS布局中position属性详解
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...
- [转载]CSS元素的定位position
CSS元素的定位position 属性position 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一 ...
- CSS中float和Clear的使用
CSS中float和Clear的使用 本文和大家重点讨论一下CSS中Float和Clear属性的使用,一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容 ...
随机推荐
- 将ts文件合并为mp4命令
cmd: copy/b D:\*.ts D:\new.ts 参考:http://blog.sina.com.cn/s/blog_66b4f1180102uzxs.html
- WORD窗体保护密码清除
Word 2003破解方法如下:1.用Word打开已设置有密码的“保护文档”(原始DOC文件):2.菜单中选择“文件”→“另存为Web页”,保存为HTML文件然后关闭Word:3.用文本编辑器(如:记 ...
- openstack RuntimeError: Unable to create a new session key. It is likely that the cache
[Mon Apr 15 01:02:31.654247 2019] [:error] [pid 19433:tid 139790082479872] Login successful for user ...
- android RadioGroup设置某一个被选中
见码滚 mPriorityRadioGroup.clearCheck(); mStatusRadioGroup.clearCheck(); RadioButton r1 = (RadioButton) ...
- UVA 12169 Disgruntled Judge（Extended_Euclid）
用扩展欧几里德Extended_Euclid解线性模方程,思路在注释里面了. 注意数据范围不要爆int了. /********************************************* ...
- Android（java）学习笔记78：Java类初始化顺序
1. Java类中初试化的顺序: 由此得出Java普通类初始化顺序结论: (1)静态变量 (2)静态初始化块 (3)变量 (4)初始化块 (5)构造器 由此得出Java继承类初始化顺序结论: (1)继 ...
- 在Spark集群中，集群的节点个数、RDD分区个数、cpu内核个数三者与并行度的关系
梳理一下Spark中关于并发度涉及的几个概念File,Block,Split,Task,Partition,RDD以及节点数.Executor数.core数目的关系. 输入可能以多个文件的形式存储在H ...
- Hadoop完全分布式集群环境搭建
1. 在Apache官网下载Hadoop 下载地址:http://hadoop.apache.org/releases.html 选择对应版本的二进制文件进行下载 2.解压配置 以hadoop-2.6 ...
- 解决centos7 nslookup:command not found
解析域名www.google.com时,报错,命令找不到,是因为新安装的centos7,没有安装bind-utils,安装后就可以运行nslookup了
- Cookie 与 Session 的区别
Cookie与Session的区别 cookie的简介 cookie是Web服务器保存在客户端的一系列文本信息 cookie的作用 对特定对象的追踪 统计网页浏览次数 简化登录 安全性能:容易信息泄露 ...