浮动的介绍
浮动最开始是实现文字环绕的效果的，但是随着发展人们开始更多的把他用到页面布局中。
一般的布局(流式布局)：
这种布局的形式是流水式的，按照从上到下，从左到右的方式进行布局。是按照默认的方式进行布局
浮动布局：
添加了浮动的元素会脱离文档流，如果她下面还有元素则会上移。
添加浮动的方式：
float:
配置：
left:向左浮动
right：向右浮动
inherit:继承父元素的浮动方式
浮动产生的缺陷
在浮动布局中，默认父元素的高度是被子元素撑开的，但是如果子元素产生浮动脱离文档流，那么就会导致高度塌陷。 清除浮动-clear： 配置： left:清除左侧浮动对元素的影响 right:清除右侧浮动对元素的影响 both:清除所有浮动对元素的影响
解决高度塌陷的方法
1、设置父元素的高度，这样可以避免高度塌陷，但是这样的话就失去了意义，父元素的高度就不能随着子元素的高度变化而变化了 2、添加弟弟法： 如果父元素中只有一个子元素，那么这个子元素浮动之后，父元素会塌陷，但是如果给这个子元素添加一个弟弟，并且这个弟弟是块元素。那么给这个弟弟添加了清除浮动的影响之后，哥哥的浮动对他的位置没有影响，那么这样如果他本身没有高度的话，那么这样实现了父元素的高度跟随子元素的高度变化的效果，并且还不会产生高度塌陷的问题。
<!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>
</head>
<style>
.box1{
border: 10px solid red;
}
.box2{
width: 200px;
height: 200px;
background-color: #bfc;
float: left;
}
.box3{
clear: both;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
上面代码中，box3就是那个弟弟，但是这样的话就是强行改变了代码的结构 3、伪类法： 这个方法的本质其实还是弟弟法，就是用::after伪类来在父元素的最后添加一个子元素（因为是在最后添加肯定是个弟弟）
<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>
</head>
<style>
.box1{
border: 10px solid red;
}
.box1::after{
content: '';
display: block;
clear: both;
}
.box2{
width: 200px;
height: 200px;
background-color: #bfc;
float: left;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
自动生成的弟弟是一个行内元素，他不中用，只要有一点地方就在那呆着，所以要把它改成块元素 可以是display:block也可以是display:table。 4、开启BFC的方法 BFC(块级格式化环境)：BFC是CSS中的一个隐式属性，不能自动开启。但是可以借他人之手开启一个BFC。开启BFC后这个元素变成一个独立的布局区域。
开启了BFC的特点：
１、开启了BFC的元素不会被其他元素所覆盖
2、开启了BFC的元素子元素和父元素的外边距不会重叠
3、开启了BFC的元素可以包括浮动的子元素
（这么一看，开启了BFC不仅可以解决高度塌陷的问题，还能解决外边界重叠的问题）
开启BFC的方法：
１、设置浮动（一般不用，会带来其他副作用）
２、将元素设置为行内块（一般也不用）
３、将overflow设置为非visible的模式，如overflow：hidden，overflow：auto。
外边界重叠的问题
1、开启BFC
上面提到了，设置BFC可以解决外边界重叠的问题，但是开启BFC的方式或多或少都有负面影响
2、利用伪类法
如果在子元素的前面加上一个东西，就可以让子元素和父元素的外边界不再重叠。那么就
可以用::before这个伪类选择器在父元素的最前面添加一个元素，但是添加的元素不能有内容，
还得能将两个边界隔开
可以在伪类选择器中设置：displsy:table.
选择其里面写为：
content: '';
display: table;
最终解法
设置一个clearfix,如下
<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>
</head>
<style>
.box1{
border: 10px solid red;
}
.clearfix::after,
.clearfix::before{
content: '';
display: table;
clear: both;
}
.box2{
width: 200px;
height: 200px;
background-color: #bfc;
float: left;
}
</style>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</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>
</head>
<style>
.box1{
width: 200px;
height: 200px;
background-color:red;
}
.box2{
width: 200px;
height: 200px;
background-color: #bfc;
position:relative;
top: 10px;
left:20px
}
.box3{
width: 200px;
height: 200px;
background-color:gray;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
相对布局是通过position：relative实现 他的偏移是相对于自己原来的位置。如果有遮盖，他在上面，但是他并未脱离文档流。
绝对定位
<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>
</head>
<style>
.box1{
width: 200px;
height: 200px;
background-color:red;
}
.box2{
width: 200px;
height: 200px;
background-color: #bfc;
position:absolute;
top: 50px;
left:20px
}
.box3{
width: 200px;
height: 200px;
background-color:gray;
}
.box0{
border: 10px solid blue;
position: relative;
}
</style>
<body>
<div class="box0">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
绝对定位是通过position:absolute来实现。绝对定位的偏移是根据第一个非static类的祖先元素来进行定位。如果没有非Static类的祖先元素，那么就以根元素页面的左上角来进行定位。绝对定位会使元素脱离文档流。
固定定位
<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>
</head>
<style>
.button {
background: red;
width: 100px;
height: 100px;
margin: 20px;
color: white;
position: fixed;
top: 80px;
left: 10px;
}
.article {
width: 500px;
height: 300px;
overflow: scroll;
padding-left: 150px;
}
</style>
<body>
<div class="article">
<p>
人生海海，聚聚散散，有人打从你生命路口经过，惊鸿一转身，便再也不见。
生命就是这样经受不住折腾，人生就这样聚散无常，上一秒还与你谈笑风生，一眨眼便天隔一方。
或许，生活就这样五味杂陈，人生纷纷扰扰，该来的一定会来，该走的悄无声息的走掉，毫无缘由，毫无征兆，任凭你怎样阻止，都于事无济，因为你我皆凡人，唯有珍惜眼前才倍觉珍贵，才能不留遗憾。
艰难的2020已成为过往，寄托希望的2021已经到来。在本应是充满期盼的新年，可惜有的人还是挺不过去那艰难困苦的岁月，早早地将自己宝贵的生命拱手奉献给了上帝。
------
峰，就是不幸中的一员。与他相聚的时光仿佛还停留在昨天，如此清晰，距离上次相聚好似才一月，可转眼，他便带着些许的遗憾决然的离开了这个尘世，再也见不到魁梧的身影了。据说他是为了们多挣一些钱，好让在县城读书的孩子能安逸一点，于是便在半夜冒着寒风帮逝去的老人诵经，可在返回的途中下起了洋洋洒洒的毛雨，在视线不太好的地方，一不留神，骑车摔下了深沟，由于没有人能及时的挽救，便在半夜孤独的疼痛而死。家人在第二天中午时分才寻到她的冰冷的尸体，在亲朋好友的帮助之上，用绳索将尸体拉了上来进行后事的处理，说起来真是凄惨。徒留貌美的妻子，年轻的孩子以及老人哭得死去活来。
有人说，世人的慌慌张张，不过图碎银几两，偏偏着这碎银几两压断了多少人的脊梁，偏偏这碎银几秒，能解世间万种慌张，可让父母安康，可护幼子成长，可足你我柴米油盐五谷杂粮。
俗话说，钱在白岩不苦不来。世人都明白好日子是苦出来的，好生活是熬出来的，只有撸起袖子加油干，生活才会富裕，才会趋向于你想象的美好发展。于是我们才会铆足劲，想方设法的战胜不利的因素，拼了命的去努力。我们更深知，世上没有一件工作是不辛苦的，没有一种生活是不委屈的，自然，我们就只能含着热泪，忍着伤痛，拼命的卖力，这是成人的担当与责任，它里面包含着深深的沉沉的爱，我们只能无奈的选择左手事业，右手家庭。为了追求万丈光芒，寻找诗和远方，除了拼，别无他路。
年少不知此中意，懂时已是不惑年。
父母对子女的爱是如此的深沉、厚重，他们心中无时无刻的在装着子女，而唯独少了自己。
------
一位全身皮肤被煤炭熏黑的煤矿工，接到了妻儿的电话，一边漫不经心的微笑着说请家人放心，自己在外一切都好，可谁知道他的真实情况是，每次午饭只能用漆黑的手指拿着两个干硬的馒头蘸着榨菜将就，用他的话来说，舍不得每次多花掉几块钱，只为能从饭每顿饭中多省出来一些，好为孩子将来上大学做准备。
一位很久没有回家农民工过年时买了站票，口袋里装满了各种零食，只为见到了孩子能让其一饱口福，满足于孩子的欲望，在临近午饭的时候，他硬是舍不得花五元钱去买一盒盒饭，更是舍不得撕掉一口为孩子准备的零食，列车人员见状为他准备了一盒免费的快餐，外加两个鸡腿。他一边贪婪地吃着，一边羞赧的对列车员说，不好意思，不瞒你说，我有近半年没有吃到这么香甜可口的饭菜了。多么心酸的话语。
没有一位父母不是全身心的爱着自己的孩子，他们宁可自己吃苦、受罪，也要把对孩子无私的爱毫无毫无保留的奉献出来。苦，全留给自己；无奈与心酸，包装在心里，从不轻易向世人透露，只将那份甘甜与美好送给家人，当看到家人的笑容，看到孩子的快乐，自己的心里才会涌现出满满的知足和高兴。
张爱玲在《半生缘》中说，中年人的孤独就是他一睁开眼，周围都是依靠他的人，没有他依靠的。这个世界永远陪在你身边的，只有你自己，尽管残酷，但这就是实质，因为心中有对家人的爱，我们便将这份苦楚深深吞咽，因为有爱，我们工作便更加的有动力。
</p>
<div class="button" >One</div>
</div>
</body>
</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>
</head>
<style>
.button {
background: red;
width: 100px;
height: 100px;
margin: 20px;
color: white;
position: fixed;
top: 80px;
left: 10px;
}
.article {
width: 500px;
height: 300px;
overflow: scroll;
padding-left: 150px;
}
</style>
<body>
<div class="article">
<p>
人生海海，聚聚散散，有人打从你生命路口经过，惊鸿一转身，便再也不见。
生命就是这样经受不住折腾，人生就这样聚散无常，上一秒还与你谈笑风生，一眨眼便天隔一方。
或许，生活就这样五味杂陈，人生纷纷扰扰，该来的一定会来，该走的悄无声息的走掉，毫无缘由，毫无征兆，任凭你怎样阻止，都于事无济，因为你我皆凡人，唯有珍惜眼前才倍觉珍贵，才能不留遗憾。
艰难的2020已成为过往，寄托希望的2021已经到来。在本应是充满期盼的新年，可惜有的人还是挺不过去那艰难困苦的岁月，早早地将自己宝贵的生命拱手奉献给了上帝。
------
<div id='hah'>hahhahahahahh</div>
峰，就是不幸中的一员。与他相聚的时光仿佛还停留在昨天，如此清晰，距离上次相聚好似才一月，可转眼，他便带着些许的遗憾决然的离开了这个尘世，再也见不到魁梧的身影了。据说他是为了们多挣一些钱，好让在县城读书的孩子能安逸一点，于是便在半夜冒着寒风帮逝去的老人诵经，可在返回的途中下起了洋洋洒洒的毛雨，在视线不太好的地方，一不留神，骑车摔下了深沟，由于没有人能及时的挽救，便在半夜孤独的疼痛而死。家人在第二天中午时分才寻到她的冰冷的尸体，在亲朋好友的帮助之上，用绳索将尸体拉了上来进行后事的处理，说起来真是凄惨。徒留貌美的妻子，年轻的孩子以及老人哭得死去活来。
有人说，世人的慌慌张张，不过图碎银几两，偏偏着这碎银几两压断了多少人的脊梁，偏偏这碎银几秒，能解世间万种慌张，可让父母安康，可护幼子成长，可足你我柴米油盐五谷杂粮。
俗话说，钱在白岩不苦不来。世人都明白好日子是苦出来的，好生活是熬出来的，只有撸起袖子加油干，生活才会富裕，才会趋向于你想象的美好发展。于是我们才会铆足劲，想方设法的战胜不利的因素，拼了命的去努力。我们更深知，世上没有一件工作是不辛苦的，没有一种生活是不委屈的，自然，我们就只能含着热泪，忍着伤痛，拼命的卖力，这是成人的担当与责任，它里面包含着深深的沉沉的爱，我们只能无奈的选择左手事业，右手家庭。为了追求万丈光芒，寻找诗和远方，除了拼，别无他路。
年少不知此中意，懂时已是不惑年。
父母对子女的爱是如此的深沉、厚重，他们心中无时无刻的在装着子女，而唯独少了自己。
------
一位全身皮肤被煤炭熏黑的煤矿工，接到了妻儿的电话，一边漫不经心的微笑着说请家人放心，自己在外一切都好，可谁知道他的真实情况是，每次午饭只能用漆黑的手指拿着两个干硬的馒头蘸着榨菜将就，用他的话来说，舍不得每次多花掉几块钱，只为能从饭每顿饭中多省出来一些，好为孩子将来上大学做准备。
一位很久没有回家农民工过年时买了站票，口袋里装满了各种零食，只为见到了孩子能让其一饱口福，满足于孩子的欲望，在临近午饭的时候，他硬是舍不得花五元钱去买一盒盒饭，更是舍不得撕掉一口为孩子准备的零食，列车人员见状为他准备了一盒免费的快餐，外加两个鸡腿。他一边贪婪地吃着，一边羞赧的对列车员说，不好意思，不瞒你说，我有近半年没有吃到这么香甜可口的饭菜了。多么心酸的话语。
没有一位父母不是全身心的爱着自己的孩子，他们宁可自己吃苦、受罪，也要把对孩子无私的爱毫无毫无保留的奉献出来。苦，全留给自己；无奈与心酸，包装在心里，从不轻易向世人透露，只将那份甘甜与美好送给家人，当看到家人的笑容，看到孩子的快乐，自己的心里才会涌现出满满的知足和高兴。
张爱玲在《半生缘》中说，中年人的孤独就是他一睁开眼，周围都是依靠他的人，没有他依靠的。这个世界永远陪在你身边的，只有你自己，尽管残酷，但这就是实质，因为心中有对家人的爱，我们便将这份苦楚深深吞咽，因为有爱，我们工作便更加的有动力。
</p>
<div class="button" >
<a href="#hah">one</a>
</div>
</div>
</body>
</html>
