CSS3 浮动与定位

浮动
- 浮动特点
- 清除浮动
- 高度塌陷（清浮动）
定位
- 相对定位
- 绝对定位
- 固定定位
- 层级

浮动

float:方向 让块级元素在一行

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动初始</title><link rel="stylesheet" href="../reset.css"><style type="text/css">ul{width: 300px; background: #ccc; margin: 20px auto;}li{width: 100px; height: 100px; float: left;}.a{background: red;}.b{background: green;}.c{background: blue;}</style>
</head>
<body><ul><li class="a"></li><li class="b"></li><li class="c"></li></ul>
</body>
</html>

浮动特点

浮动元素就像浮云一样浮起来了，浮动元素后面正常元素会自动补位
浮动元素会脱离正常的文档流，但没有完全脱离文档流
浮动元素会被父元素宽度所约束，所以浮动元素并没有完全脱离文档流
当浮动元素上一行是正常元素，这个浮动元素只能待在当前行，不能跑到上一行
左浮动：元素会向左跑，会从上一行最右边出来继续往左跑，知道遇到有浮动属性的元素才会停止
右浮动：元素会向右跑，会从上一行最左边出来继续往右跑，知道遇到有浮动属性的元素才会停止
浮动元素会对它下面正常元素中的文字产生影响

清除浮动

规定元素哪一侧不能有浮动元素

clear:left; 元素左侧不能有浮动元素

clear:right; 元素右侧不能有浮动元素

clear:both; 元素左右两侧都不能有浮动元素

高度塌陷（清浮动）

由于父元素中的子元素设置了浮动属性，会造成父元素高度塌陷

防止高度塌陷

直接给父元素设置高度
在浮动元素内容之后加一个块级元素，设置左右两侧不能有浮动元素，就可以防止父元素高度塌陷
使用伪元素方法在浮动元素内容之后加一个空内容，转成块级元素。设置左右两侧不能有浮动元素
ul::after{ content: “”; display: block; clear: both; }
父元素设置有高度时，不用清浮动。父元素没有设置高度时，一定要清除浮动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>高度塌陷</title><link rel="stylesheet" href="../reset.css"><style type="text/css">ul{width: 304px; border: 2px solid black; margin: 20px auto;}.a,.b,.c{width: 100px; height: 100px; float: left;}.a{background: red;}.b{background: green;}.c{background: blue;}/* .d{background: #ccc; clear: both;} *//* 防止高度塌陷方法2 */ul::after{content: "";display: table; /*默认是行内元素，所有要转换*/clear: both;}</style>
</head>
<body><ul class="clearfix"><li class="a"></li><li class="b"></li><li class="c"></li><!-- <li class="d"></li>防止塌陷方法1 --></ul>
</body>
</html>

定位

规定元素的位置，定位用于没有规律的元素而布局

定位的三种方式：relative相对定位、absolute绝对定位、固定定位

定位使用方法：

position:定位方式规定是哪一个定位方式
指定在方向上的偏移量：top bottom left right（top和bottom只有一个会生效，left和right也是只有一个会生效；left和top优先）

相对定位

指定相对定位后，元素就是一个定位元素，脱离文档流，但没有完全脱离文档流
相对定位元素脱离了文档流，但原来的位置还是保留
相对定位是相对于原来的位置进行定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>定位</title><link rel="stylesheet" href="../reset.css"><style type="text/css">.box{width: 302px; height: 302; border: 1px solid black; margin: 50px auto;}.pst1,.pst2,.pst3{width: 100px; height: 100px;}.pst1{background: red;}.pst2{background: green;position: relative;left: 50px; top: 70px;}.pst3{background: blue;}</style>
</head>
<body><div class="box"><div class="pst1"></div><div class="pst2"></div><div class="pst3"></div></div>
</body>
</html>

绝对定位

指定绝对定位后，元素就是一个定位元素，完全脱离文档流，原来的位置不会保留
绝对定位是相对于最近有定位属性的父元素进行定位
如果往上没找到有定位元素的父元素，才会相对于body元素进行定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绝对定位</title><link rel="stylesheet" href="../reset.css"><style type="text/css">.bigBox{width: 500px; height: 500px; position: relative;margin: 10px auto; border: 1px solid red;}.box{width: 302px; height: 302;  margin: 50px auto;border: 1px solid black;}.pst1,.pst2,.pst3{width: 100px; height: 100px;}.pst1{background: red; }.pst2{background: green;position: absolute;left: 50px; top: 20px;}.pst3{background: blue;}</style>
</head>
<body><div class="bigBox"><div class="box"><div class="pst1"></div><div class="pst2"></div><div class="pst3"></div></div></div>
</body>
</html>

固定定位

指定固定定位后，元素就是一个定位元素，完全脱离文档流，原来的位置不会保留
父元素是否设置了定位属性并不影响固定定位
固定定位是相对于浏览器窗口进行定位；注意：不是相对于body元素进行定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>固定定位</title><link rel="stylesheet" href="../reset.css"><style type="text/css">body{height: 2000px;}.bigBox{width: 500px; height: 500px; position: relative;margin: 10px auto; border: 1px solid red;}.box{width: 302px; height: 302;  margin: 50px auto;border: 1px solid black; position: relative;}.pst1,.pst2,.pst3{width: 100px; height: 100px;}.pst1{background: red; }.pst2{background: green;position: fixed;top: 50px; left: 100px;}   .pst3{background: blue;}</style>
</head>
<body><div class="bigBox"><div class="box"><div class="pst1"></div><div class="pst2"></div><div class="pst3"></div></div></div>
</body>
</html>

层级

z-index:数值

每一个定位元素会独占一层
改变层级来改变定位元素堆叠顺序
数值越大，层级越高，层级默认值为0
当层级一样，后写元素会盖住先写元素，后来居上

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>层级</title><link rel="stylesheet" href="../reset.css"><style type="text/css">.box{width: 302px; height: 302px; margin: 50px auto;border: 2px solid black; position: relative;}.pst1,.pst2,.pst3{width: 100px; height: 100px;}.pst1{background: red;position: absolute;left: 30px; top: 30px; z-index: 9;}.pst2{background: green;position: absolute;left: 60px; top: 60px;z-index: 2;}.pst3{background: blue;position: absolute;left: 90px; top: 90px;z-index: 7;}</style>
</head>
<body><div class="box"><div class="pst1"></div><div class="pst2"></div><div class="pst3"></div></div>
</body>
</html>

CSS3 浮动与定位相关推荐

＜CSS3＞浮动定位与背景样式-浮动与定位
目录 1.浮动与定位 1.1 浮动 1.1.1 浮动的基本概念 1.1.2 使用浮动实现网页布局 1.1.3 BFC规范(overflow:hidden) 1.1.4 清除浮动 2.定位 2.1 相对 ...
Bootstrap——制作个人简历网页、工具类【边框（添加、删除、颜色、圆角）、清除浮动、颜色（文本、链接、背景）、display属性、浮动、定位、文本对齐】
制作个人简历网页代码: <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
【前端布局篇】浮动、定位、弹性布局，固比固、双飞翼、圣杯布局
一.布局方式介绍布局模型是基于盒模型基础上进行的拓展,关于布局有流式布局(标准的布局),浮动布局.定位布局.flex布局等. HTML5+CSS3系列课程携程网首页-移动端响应式布局实战之微加建 ...
三、关于网页布局你该知道这些！（布局总结：标准流、浮动、定位）
一个完整的网页,是标准流.浮动.定位一起完成布局的,三者都有自己专门的用法. 标准流可以让盒子上下排列喝着左右排列,垂直的块级盒子显示就用标准流布局. 浮动可以让多个块级元素一行显示或者左右对齐盒 ...
CSS中文档流之普通流，浮动及定位、浮动特性及清除浮动的方式、定位模式，子绝父相搭配定位方式、z-index层级
文档流: 普通流(normal flow): 字面意思是普通流或者标准流,也就是常说的文档流,指网页内标签正常是从上到下,从左到右排列的意思,css的定位机制有3种:普通流(标准流).浮动.定位. 浮 ...
CSS框模型，浮动，定位以及其他属性
CSS框模型,浮动,定位以及其他属性 1.CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框和外边距的方式 element : 元素. padding : 内边距,也 ...
CSS核心内容-标准流、盒子模型、浮动、定位
CSS核心内容-标准流.盒子模型.浮动.定位,了解了核心内容才能用CSS设计出一个简单的页面一.基础在了解核心内容之前需要先了解HTML中的两种标签:块级元素,行内元素: 块级元素:一个块级元素占 ...
1.01.21盒子模型，浮动，定位
1.01.21盒子模型,浮动,定位 1.盒子模型 1. 标准文档流网页在排版布局时,遵循的从上到下,从左到右的顺序正常的元素是会占据页面的空间大小的脱离文档流:不再遵循从上往下,从左往右的顺序( ...
阿ken的HTML、CSS的学习笔记_浮动与定位（笔记六）
欢迎光临你好我是阿ken 文章目录 6.1_元素的浮动 6.1.1_元素的浮动属性 float 6.1.2_清除浮动 clear 6.2_overflow 属性 6.3_元素的定位 6.3.1_元 ...

CSS3 浮动与定位

CSS3 浮动与定位

浮动

浮动特点

清除浮动

高度塌陷（清浮动）

定位

相对定位

绝对定位

固定定位

层级

CSS3 浮动与定位相关推荐

最新文章

热门文章