首先我们制作两个标准块级元素,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div></div>
<p>为中华之崛起而读书!!!</p>
</body>
</html>
运行结果如下:
现在给第一个块级元素添加绝对定位,我们来看看效果:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-color: cornflowerblue;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<p>为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!</p>
</body>
</html>
运行结果如下:
总结:盒子添加了绝对定位,则绝对定位会压住下面标准流所有的内容
那我们来看看浮动的效果,我现在把绝对定位换成浮动:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-color: cornflowerblue;
float: left;
}
</style>
</head>
<body>
<div></div>
<p>为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!</p>
</body>
</html>
运行结果如下:
咦,难道浮动的元素不会压住标准流盒子吗?
如上图,浮动的盒子是会压住标准流盒子的,但是不会压住标准流的文字(图片)o ~
我在复制多一些文字,效果更明显,你们看:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-color: cornflowerblue;
float: left;
}
</style>
</head>
<body>
<div></div>
<p>为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!</p>
<p>为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!</p>
<p>为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!</p>
<p>为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!</p>
<p>为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!</p>
<p>为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!</p>
<p>为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!</p>
<p>为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!</p>
<p>为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!</p>
<p>为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!</p>
<p>为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!</p>
<p>为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!</p>
<p>为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!</p>
<p>为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!</p>
<p>为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!</p>
<p>为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!为中华之崛起而读书!!!</p>
</body>
</html>
运行效果如下:
是不是很神奇,浮动为什么不会压住文字呢,其实浮动存在的最初是为了做文字环绕效果的,让文字围绕浮动元素!