clear
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: #bfa;
float: left;
}
.box1 {
width: 200px;
height: 200px;
background-color: red;
float: right;
}
.box3 {
width: 100px;
height: 100px;
background-color: black;
clear: both; /* 和clear: right; 一样*/
/*
由于box1的浮动，导致box3位置上移
也就是box3受到了box1浮动的影响，位置发生了改变
如果我们不希望某个元素因为其他元素浮动的影响而改变位置,
可以通过clear属性来清除浮动元素对当前元素所产生的影响
clear 属性用来清除浮动元素对当前元素所产生的影响
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中最大影响的一侧
原理：
设置清除浮动以后，浏览器会自动为元素添加一个上外边距，
以使其位置不受其他元素的影响
*/
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
clearfix
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: red;
}
/* .box1::before {
content: '';
display: table; 解决外边距重叠问题
} */
/* 解决外边距重叠问题 */
/*
clearfix 这个样式可以同时解决高度塌陷问题和外边距重叠问题
*/
.clearfix::before,
.clearfix::after {
content: '';
display: table;
clear: both;
}
.box2 {
width: 100px;
height: 100px;
background-color: #bfc;
margin-top: 50px; /* 外边距重叠 */
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
解决高度塌陷的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
border: 10px solid red;
/* overflow: hidden; 解决高度塌陷 */
}
.box2 {
width: 100px;
height: 100px;
background-color: #bfa;
float: left;
}
.box3 {
clear: both; /* 解决高度塌陷 */
}
/* 推荐 */
/* 解决高度塌陷 */
.box1::after {
clear: both; /* 因为是行内元素，所以不生效 */
display: block;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<!-- <div class="box3"></div> -->
</div>
</body>
</html>
定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
background-color: black;
position: relative;
left: 100px;
bottom: 100px;
}
.box3 {
width: 100px;
height: 100px;
background-color: green;
}
/*
定位(position)：
定位是一种更加高级的布局手段
通过定位可以将元素摆放到页面的任意位置
使用 position 属性来设置定位
static 默认值，元素是静止的，没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
*/
/*
相对定位：
当元素的position属性值设置为relative时则开启了元素的相对定位
特点：
元素开启相对定位后，如果不设置偏移量，元素不会发生任何的变化
相对定位是参照于元素在文档流中的位置进行定位的(相对自身原来的位置)
相对定位会提升元素的层级
相对定位不会脱离文档流
相对定位不会改变元素的性质，块元素还是块元素，行内元素还是行内元素
偏移量(offset)：
当元素开启定位后，可以通过偏移量来设置元素的位置
定位元素的垂直方向的位置由top和bottom两个属性来控制
通常情况只使用其中之一
top值越大，定位元素越向下移动；bottom值越大，定位元素越向上移动。
top
定位元素和定位位置上边的距离
bottom
定位元素和定位位置下边的距离
定位元素的水平方向的位置由left和right两个属性来控制
通常情况只使用其中之一
left值越大，定位元素越向右移动；right值越大，定位元素越向左移动。
left
定位元素和定位位置左边的距离
right
定位元素和定位位置右边的距离
*/
.box4 {
width: 100px;
height: 100px;
background-color: yellow;
position: relative;
}
.box5 {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
.box6 {
width: 100px;
height: 100px;
background-color: purple;
/* position: relative; */
}
/*
绝对定位：
当元素的position属性值设置为absolute时，则开启了元素的绝对定位
特点：
开启绝对定位后，元素如果不设置偏移量则其位置不会发生变化
开启绝对定位后，元素会从文档流中脱离
绝对定位会改变元素的性质，行内元素变块元素，块元素的宽高被内容撑开
绝对定位会使元素提升一个层级
绝对定位元素是相对于其包含块进行定位的
包含块(containing block)：
正常情况下，包含块就是离当前元素最近的祖先(块)元素
开启绝对定位情况下，包含块就是离当前元素最近(开启了定位)的祖先块元素
如果所有的祖先元素都没有开启定位，则相对于根元素进行定位(根元素就是包含块)
html(根元素、初始包含块)
*/
.box7 {
width: 100px;
height: 100px;
background-color: yellowgreen;
position: relative;
}
.box8 {
width: 100px;
height: 100px;
background-color: palegreen;
position: relative;
}
.box9 {
width: 100px;
height: 100px;
background-color: palevioletred;
position: fixed;
left: 0;
top: 0;
}
/*
固定定位：
当元素的position属性值设置为fixed时，则开启了元素的固定定位
固定定位也是一种绝对定位，所以固定定位和绝对定位大部分特点一样
唯一不同点：固定定位永远参照于浏览器的视口(浏览器的可视窗口)进行定位
固定定位的元素不会随网页的滚动条滚动
*/
/*
粘滞定位：
当元素的position属性值设置为sticky时，则开启了元素的粘滞定位
粘滞定位和相对定位的特点基本一样
不同的是粘滞定位可以在元素到达某个位置时将其固定
*/
.box10 {
width: 500px;
height: 500px;
background-color: red;
position: relative;
}
.box11 {
width: 100px;
height: 100px;
background-color: gray;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0; /* 不设置 水平居中不生效 */
right: 0; /* 不设置 水平居中不生效 */
margin-top: auto;
margin-bottom: auto;
top: 0; /* 不设置 垂直居中不生效 */
bottom: 0; /* 不设置 垂直居中不生效 */
}
/*
开启定位的布局：
水平布局：
left + margin-left + border-left + padding-left +
width + padding-right + border-right + margin-right + right
= 包含块的内容区的宽度
水平方向的布局等式就需要添加left和right两个值
此时规则和之前的一样
如果9个值中都没有auto，则自动调整right以使等式满足
如果有auto，则自动调整auto的值以使等式满足
可以设置auto的值：margin width left right
因为left和right的值默认是auto，所以如果不设置left和right
则等式不满足，会自动调整这两个值(设置水平居中)
垂直布局：
top + margin-top + border-top + padding-top +
height + padding-bottom + border-bottom +margin-bottom + bottom
= 包含块的高度
*/
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box6">
<div class="box4">
<div class="box5">
</div>
</div>
</div>
<div class="box7">
<div class="box8">
<div class="box9">
</div>
</div>
</div>
<div class="box10">
<div class="box11"></div>
</div>
</body>
</html>
元素的层级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: red;
/* z-index: 3; */
}
.box2 {
width: 100px;
height: 100px;
background-color: black;
position: absolute;
top: 20px;
left: 30px;
/* z-index: 1; */
}
.box3 {
width: 100px;
height: 100px;
background-color: gray;
position: absolute;
top: 50px;
left: 70px;
z-index: 2;
}
.box4 {
width: 20px;
height: 20px;
background-color: purple;
position: absolute; /* 不会被box3盖住 */
}
/*
元素的层级：
对应开启了定位的元素，可以通过z-index属性来指定元素的层级
z-index需要一个整数作为参数，值越大元素的层级越高
元素的层级越高就优先显示
如果元素的层级一样，则优先显示靠下的元素
祖先元素的层级再高也不会盖住后代元素
*/
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3">
<div class="box4">
</div>
</div>
</body>
</html>
