浮动和定位
有时只靠盒子模型让元素自然而然的排列达不到我们想要的效果，这时就需要用到浮动（float）和定位（position）。
浮动
使元素浮起来，脱离文档流重新定位，向左或向右飘去直至触及父元素边缘或另一个浮动元素。
div ｛
float: left;
/*float: right 向右浮动*/
/*float: none 取消浮动*/
｝
特性
- 脱标，浮动的盒子将不再保持原本的位置，而是脱离标准普通流前往浮动到左或右端，不占有位置，不撑起父元素；（就像是到了另一个更上面的图层另行排布一样）
- 数个浮动的元素默认在一行显示，中间没有间隙，不够则换行；
- 任何元素都可以浮动，浮动后具有类似于行内块元素的特性，其大小由内容决定。
清除浮动
由于浮动元素不占有位置，不会撑起父元素高度，而有时父元素不方便指定高度，就会影响到接下来的排版。
于清除浮动，清除浮动是用于清除浮动元素造成的影响，避免影响接下来的排版，使父元素可以被撑起。
方法：
- 额外标签法：在外面套一个空
<div>，并给它添加属性clear:both - 给父级元素添加属性
overflow:hidden - 给父级元素添加after伪元素
- 给父级元素添加双伪元素
例子
并列和左右
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.parent {
margin: auto;
width: 550px;
height: 250px;
background-color: blue;
}
.right {
width: 250px;
height: 250px;
background-color: red;
float: right;
}
.left {
width: 250px;
height: 250px;
background-color: pink;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="right">1</div>
<div class="right">2</div>
</div>
<div class="parent">
<div class="right">3</div>
<div class="left">4</div>
</div>
</body>
</html>
clear
clear用于规定元素的某一侧不允许其他浮动元素，在元素生成时生效，因此只对前面的元素起作用。
<html>
.container {
border: 1px solid #686464;
}
.container .photo {
float: left;
width: 100px;
height: 160px;
background-color: #F6900B;
}
.container .name {
float: left;
width: 100px;
height: 40px;
background-color: #F03309;
}
</html>
<div class="container">
<div class="photo"></div>
<div class="name"></div>
<p>clear用于规定元素的某一侧不允许其他浮动元素，在元素生成时生效，因此只对前面的元素起作用。</p>
</div>
清除浮动
- 额外标签法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fahter{
width: 400px;
border: 1px solid deeppink;
}
.big{
width: 200px;
height: 200px;
background: darkorange;
float: left;
}
.small{
width: 120px;
height: 120px;
background: darkmagenta;
float: left;
}
.footer{
width: 900px;
height: 100px;
background: darkslateblue;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="fahter">
<div class="big">big</div>
<div class="small">small</div>
<div class="clear">额外标签法</div>
</div>
<div class="footer"></div>
</body>
</html>
- 父元素添加overflow:hidden
.fahter{
width: 400px;
border: 1px solid deeppink;
overflow: hidden;
}
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
- 使用after伪元素清除浮动
.clearfix:after{
display:block;
content:"";/*设置为空或者“.”都可以*/
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
- 双伪元素清除浮动
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
定位
定位是一种高级的布局手段，通过定位可以将元素摆放到页面的任意位置，需要通过position属性来设置元素的定位。
| 可选值 | 含义 |
|---|---|
| static | 默认值，元素没有开启定位 |
| relative | 开启元素的相对定位 |
| absolute | 开启元素的绝对定位 |
| fixed | 开启元素的固定定位 |
相对定位
当元素的position设置为relative时，则开启了元素的相对定位。
特点：
-
当开启了相对定位，而不设置偏移量，元素不会发生任何变化。
-
相对定位是相当于元素自身在文档流中的位置来进行定位的。
-
相对定位不会使元素脱离文档流。
-
相对定位不会改变元素的性质，块还是块，内联还是内联。
-
相对定位可以使元素提升一个层级。
层级：文档流 < 浮动 < 定位
偏移量：当元素开启了定位以后（position是非static的值），可以通过四个偏移量来设置元素的位置：
| 属性名 | 含义 |
|---|---|
| top | 当前元素距离其定位元素的顶部的距离 |
| right | 当前元素距离其定位元素的右侧的距离 |
| bottom | 当前元素距离其定位元素的底部的距离 |
| left | 当前元素距离其定位元素的左侧的距离 |
一般情况下，四个偏移量只需要使用两个即可确定一个元素的位置，一个水平的，一个垂直的：top left/top right/bottom left/bottom right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Relative定位</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: aqua;
margin-bottom: 10px;
}
.box1{
/* relative是相对自身定位 */
position: relative;
left: 100px;
top:100px;
}
.box2{
position: relative;
left: -100px;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<span>span1</span><span>span2</span>
</body>
</html>
绝对定位
将元素的position属性设置为absolute即可开启绝对定位
特点：
-
开启绝对定位以后，如果不设置偏移量，元素的位置不会发生变化。
-
绝对定位相对于离他最近的开启了定位的祖先元素进行定位，如果所有的祖先元素都没有开启定位，则相对于浏览器窗口进行定位。所以一般我们为一个子元素开启定位，同时也会开启其父元素的相对定位。
-
绝对定位会使元素完全脱离文档流。
-
绝对定位会改变元素的性质，块元素的默认宽度和高度被内容撑开，内联元素变成块元素。
-
绝对定位会提升元素的一个层级。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
border:1px solid black;
text-align: center;
}
.box1{
width: 400px;
height: 400px;
border: 1px solid ridge;
position: relative;
}
.box2{
width: 200px;
height: 200px;
border: 1px solid green;
/* position: relative; */
}
/* 对box3使用absolute进行定位 */
.box3{
width: 100px;
height: 100px;
border: 1px solid blueviolet;
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box box1">
<div class="box box2">
<div class="box box3"></div>
</div>
</div>
</body>
</html>
固定定位
将position属性值设置fixed则开启了元素的固定定位。固定定位也是一一种绝对定位，大部分的特点都和绝对定位相同。不同的是固定定位的元素永远相对于浏览器窗口进行定位，而且固定定位的元素不会随滚动条滚动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 4000px;
}
/* 相对窗口定位 */
.box{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
text-align: center;
line-height: 100px;
}
.box1{
/* 脱离文档流，对后面的元素有影响 */
position: fixed;
right: 20px;
bottom: 100px;
}
</style>
</head>
<body>
<div class="box box1">box1</div>
<div class="box box2">box2</div>
</body>
</html>
元素层级：z-index
当元素开启了定位以后，可以通过z-index来设置元素的层级，z-index需要一个整数作为参数，值越大层级越高。当两个元素发生重叠时，z-index值越大越优先显示，z-index值相同的优先显示下边的元素。
591
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
