文字环绕注意事项

最新推荐文章于 2024-08-30 16:48:59 发布

m0_48845795

最新推荐文章于 2024-08-30 16:48:59 发布

阅读量99

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/m0_48845795/article/details/116460050

版权

HTML CSS 图文环绕浮动布局

关键词由CSDN通过智能技术生成

文字环绕注意事项

先上代码

<!DOCTYPE html>
<html>
    <head>
        <title>文字环绕</title>
    </head>
    <style>
        *{margin: 0;}
        
        p {border:1px solid red;}
        img {float:left; 
             width: 50%;height: auto;
             margin:0 5px 0 0;
           /* margin-left: 10px; */
        }
    </style>
    <body>
        <img src="../dongman.jpg" alt="">
        <p>动漫，即动画、漫画的合称，指动画与漫画的集合，取这两个词的第一个字合二为一称之为“动漫”，与游戏无关，并非专业术语。动漫是动画与漫画的集合，动漫与动画的关系是包含与被包含关系，并非同属关系。所有的动画、漫画作品都可以称之为动漫作品，但不可说动画或者漫画是动漫，原因是在语义上：动画和漫画是两种不同的艺术形式的作品，而并无“动漫”这种艺术形式的作品，它只是一个由中国本土所创的合成词。</p>
        
    </body>
</html>

注意：图片的引用一定要在文字

标签的前面，否则没有文字环绕效果。如图：
在这里插入图片描述
如果将

标签放在图片引用后面，如图：
在这里插入图片描述

为啥会如此：

代码执行顺序从上而下，从左到右依次执行，若p标签在前，浏览器已经给p标签一个定位了，再加浮动，图片就只会在文字下面（如果此时使用定位强制向上移动图片，图片会覆盖文字）；若图片代码在前，就会先浮动，脱离文档流，那么文字便环绕在其周围了。

m0_48845795

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文字环绕注意事项

文字环绕注意事项先上代码<!DOCTYPE html><html> <head> <title>文字环绕</title> </head> <style> *{margin: 0;} p {border:1px solid red;} img {float:left; width: 50%
复制链接

扫一扫