一、背景
绝对定位可以产生浮动，float也会产生浮动，均会使对象脱离文档流
二、绝对定位的效果
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="div0">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
散文，汉语词汇，拼音是sǎn wén。一指文采焕发；二指犹行文； [1] 三指文体名。随着时代的发展，散文的概念由广义向狭义转变，并受到西方文化的影响。
散文是一种抒发作者真情实感、写作方式灵活的记叙类文学体裁。“散文”一词大概出现在北宋太平兴国（976年12月-984年11月）时期。
《辞海》认为：中国六朝以来，为区别韵文与骈文，把凡不押韵、不重排偶的散体文章（包括经传史书），统称“散文”。后又泛指诗歌以外的所有文学体裁。
</body>
</html>
index.css
div{
width: 100px;
height: 100px;
}
.div1{
background-color: red;
}
.div2{
background-color: green;
}
.div3{
background-color: blue;
}
.div0{
position: absolute;
height: 300px;
right: 10px;
}
image.png
三、浮动float的效果
index.css
div{
width: 100px;
height: 100px;
}
.div1{
background-color: red;
}
.div2{
background-color: green;
}
.div3{
background-color: blue;
}
.div0{
/*position: absolute;*/
height: 300px;
right: 10px;
float: right;
}
image.png
四：总结
绝对定位，文字会被遮挡，浮动定位，文字不会被遮挡
网友评论