定位会完全压住标准流盒子内容及浮动的最初目的是文字环绕

本文主要是介绍定位会完全压住标准流盒子内容及浮动的最初目的是文字环绕，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

定位会完全压住标准流盒子内容

<!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>定位会完全压住标准流盒子内容</title><style>.box {/* 浮动的元素会压住下面标准流的盒子，不会压住下面标准流的文字 *//* float: left; *//* 绝对定位或者固定定位会压住下面标准流所有的内容 */position: absolute;width: 150px;height: 150px;background-color: pink;}</style>
</head><body><div class="box"></div><p>阁下何不同风起，扶摇直上九万里</p>
</body></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>浮动产生的最初目的是文字环绕</title><style>img {float: left;}</style>
</head><body>1993年，在古装片《455》中扮演一个武功超群的渔民***********************************************************************************************************************************************************************************在片中塑造了一个风流不羁的江湖浪子形象<img src="dj.png">***************************************************************************
</body></html>