????????什么是脫離文檔流呢？可以這樣理解，本來這個(gè)標(biāo)簽是屬于文檔流管理的，那么它應(yīng)該按照文檔流的正常布局方式從左至右從上之下，并且符合標(biāo)簽本身的含義。
????????脫離文檔流是指，這個(gè)標(biāo)簽脫離了文檔流的管理。不受文檔流的布局約束了，并且更重要的一點(diǎn)是，這個(gè)標(biāo)簽在原文檔流中所占的空間也被清楚掉了。
? ? ? ? 接下來將介紹三種脫離文檔流的方法。
1.float: 浮動，為元素設(shè)置float屬性，可以讓元素脫離原本的文檔流獨(dú)立開來，單獨(dú)實(shí)現(xiàn)向左或向右，在設(shè)置float屬性之后元素自動設(shè)置為塊級元素，并且不會占據(jù)原本的位置。
<!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>未設(shè)置float屬性：
設(shè)置float：right
2.absolut: 絕對定位，absolut脫離的文檔流是相對于其父元素的，而且這個(gè)父元素的position屬性不為static（static為position默認(rèn)屬性），?如果absolute所在元素的父元素position屬性為static則其繼續(xù)向上尋找，直到找到符合要求的父元素。脫離文檔流之后其他元素會無視此元素，其此元素不再占據(jù)原本的位置
設(shè)置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>
?設(shè)置box2相對于head的位置
?文章來源地址http://www.zghlxwxcb.cn/news/detail-618215.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>
*{
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>
3.fixed:設(shè)置此屬性的元素在位置上總是相對于body標(biāo)簽，也就是說在網(wǎng)頁中設(shè)計(jì)此類標(biāo)簽不會隨著網(wǎng)頁的上下滑動而變化總是固定在網(wǎng)頁的一個(gè)位置
<!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>設(shè)置fixed之前
?
設(shè)置fixed之后
?
文章來源：http://www.zghlxwxcb.cn/news/detail-618215.html
?
到了這里，關(guān)于脫離文檔流的三種方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
