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的对象,将根据设置的方向,左移或右移到其父容 ...
随机推荐
- java +selenuim使用js显示控件
操作selenium控件时,往往需要有些控件提前显示,特别是后台的一些控件,或者需要使用鼠标显示下拉的操作,有时鼠标悬停,在点击不怎么好使,就可以依靠js方式,提前让控件显示. 1.使用style的方 ...
- World Wind Java开发之一（转）
http://blog.csdn.net/giser_whu/article/details/40477235 参照<World wind Java三维地理信息系统开发指南随书光盘>以及官 ...
- POJ-1459 Power Network---最大流
题目链接: https://cn.vjudge.net/problem/POJ-1459 题目大意: 简单的说下题意(按输入输出来讲,前面的描述一堆的rubbish,还用来误导人),给你n个点,其中有 ...
- 浅谈KD-Tree
前言 \(KD-Tree\)是一个十分神奇的东西,其实本质上类似于一个\(K\)维的二叉搜索树. 核心思想 \(KD-Tree\)的核心思想与\(BST\)是差不多的(插入等操作也都基本上一样). 唯 ...
- 将bat批处理文件注册成windows服务
C:\Users\lenovo>sc create MyService binPath= "C:\Program Files\restartOracle.bat" type ...
- 解决session过期跳转到登录页并跳出iframe框架（或者layui弹出层）
当用户长时间停留在管理界面没有操作,等到session过期后,进行了操作,那么只是iframe跳转到login页面,这不是我们想要的结果.解决方法:在login页面加一个逻辑判断: <scrip ...
- java字符格式
http://blog.chinaunix.net/uid-12348673-id-3335300.html http://blog.csdn.net/zhouyong80/article/detai ...
- C#自减运算符
一.C#自减运算符(--) 自减运算符(--)是将操作数减1. 1. 前缀自减运算符 前缀自减运算符是“先减1,后使用”.它的运算结果是操作数减1之后的值. 例如: --x; // 前缀自减运算符 ...
- 牛客小白月赛1 G あなたの蛙は旅⽴っています【图存储】【DP】
题目链接:https://www.nowcoder.com/acm/contest/85/G 思路: DP 空间可以优化成一维的, 用一维数组的 0 号单元保存左斜对角的值即可. 存图这里真不好理解 ...
- testC-I
总时间限制: 20000ms 单个测试点时间限制: 1000ms 内存限制: 128000kB 描述 给你一组数,a1,a2,a3,⋯,an. 令:G=gcd(a1,a2,a3,⋯,an) 现在 ...