什么是脱离文档流？
这个标签脱离文档流的管理，不受文档流的布局约束，并且这个标签在原文档流中所占的空间也被清楚掉了
脱离文档流的3种方法为：
方法1：float浮动
方法2：flexed
方法3：absolut绝对定位
方法1【float浮动】：
<!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> .main{ width: 800px; height: 800px; border: 3px solid black; } .box1{ width: 200px; height: 200px; border: 3px solid red; } .box2{ width: 200px; height: 200px; border: 3px solid green; float: right; } .box3{ width: 200px; height: 200px; border: 3px solid blue; } </style> </head> <body> <div class="main"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </body> </html>
.float: 浮动，为元素设置float属性
让元素脱离原本的文档流独立开来，单独实现向左或向右
在设置float属性之后元素自动设置为块级元素，并且不会占据原本的位置
未设置浮动：
设置浮动后：【float:right】
方法2【fixed】：
<!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> html,body{ height: 10000px; } *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background-color:gray; /* position: fixed; */ } </style> </head> <body> <div class="box"></div> </body> </html>
未设置fixed
设置fixed后
fixed:设置此属性的元素在位置上总是相对于body标签，也就是说在网页中设计此类标签不会随着网页的上下滑动而变化总是固定在网页的一个位置
方法3【absolut】：
设置box1相对于main的位置
<!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> *{ margin: 0; padding: 0; } .head{ width: 800px; height: 500px; border: 3px solid black; /* position: relative; */ } .main{ width: 500px; height: 500px; border: 3px solid rgb(214, 48, 48); position: relative; margin-top: 100px; margin-left: 100px; } .box1{ width: 200px; height: 200px; border: 3px solid rgb(38, 17, 224); position: absolute; left: 100px; } .box2{ width: 200px; height: 200px; border: 3px solid rgb(17, 224, 62); } </style> </head> <body> <div class="head"> <div class="main"> <div class="box1"></div> <div class="box2"></div> </div> </div> </body> </html>
设置box2相对于head位置
<!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> *{ margin: 0; padding: 0; } .head{ width: 800px; height: 500px; border: 3px solid black; position: relative; } .main{ width: 500px; height: 500px; border: 3px solid rgb(214, 48, 48); /* position: relative; */ margin-top: 100px; margin-left: 100px; } .box1{ width: 200px; height: 200px; border: 3px solid rgb(38, 17, 224); position: absolute; left: 100px; } .box2{ width: 200px; height: 200px; border: 3px solid rgb(17, 224, 62); } </style> </head> <body> <div class="head"> <div class="main"> <div class="box1"></div> <div class="box2"></div> </div> </div> </body> </html>
absolut脱离的文档流是相对于其父元素的，而且这个父元素的position属性不为static（static为position默认属性）， 如果absolute所在元素的父元素position属性为static则其继续向上寻找，直到找到符合要求的父元素。脱离文档流之后其他元素会无视此元素，其此元素不再占据原本的位置
