css布局技巧-文字围绕浮动元素巧妙运用

简介: 解释我们前面讲浮动的时候说道浮动的元素会“飞起来”,不占有位置,会破毁标准流,导致浮动的元素下面的标准流会跑到浮动元素的位置被浮动的元素压住,但是,我们之前在浮动那一节说过,浮动产生的目的就是让文字围绕浮动元素的,即浮动的盒子不会压住文字,利用这个特性可以很好的简化某些布局。
<!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;
        }
        .box{
            width: 800px;
            height: 132px;
            background-color: skyblue;
            margin: 0 auto;
            padding: 5px;
        }
        .pic{
            float: left;
            margin-right: 5px;
            width:200px;
            height: 132px;
        }
        .pic img{
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="pic">
            <img src="300.jpg" alt="">
        </div>
        <p>泰山又名岱山、岱宗,隶属于山东省泰安市[1],是世界自然与文化遗产、国家5A级旅游景区,有“五岳之首”“五岳之长”“天下第一山”之称。
        泰山被古人视为“直通帝座”的天堂,成为百姓崇拜,帝王告祭的神山,有“泰山安,四海皆安”的说法。
        自秦始皇开始到清代,先后有13代帝王引次亲登泰山封禅或祭祀,另外有24代帝王遣官祭祀72次。
        泰山代表景点有阴阳界、桃花峪、傲徕峰、玉皇顶。</p>
    </div>
</body>
</html>

image.png

相关文章
|
1月前
|
数据采集 前端开发 JavaScript
捕捉页面的关键元素:用CSS选择器与Puppeteer自动抓取
本文介绍了如何使用 Puppeteer 结合 CSS 选择器抓取动态网页中的关键元素,以亚航网站的特价机票信息为例,通过设置代理 IP、User-Agent 和 Cookie 等技术手段,有效提升爬虫策略,实现高效、稳定的爬取。
捕捉页面的关键元素:用CSS选择器与Puppeteer自动抓取
|
24天前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
51 7
|
29天前
CSS3制作的聚光灯下倒影文字选装动画特效源码
CSS3聚光灯下倒影文字特效是一段基于CSS3实现的聚光灯下带倒影的文字旋转动画效果代码,具有真实的视觉感,同时文字还会在旋转过程中显示出灯光的反射效果,很有意思,欢迎对此段代码感兴趣的朋友前来下载使用。
29 6
|
1月前
纯css3发光霓虹灯文字闪烁特效代码
纯css3发光霓虹灯文字闪烁特效代码是一款彩色的店铺名称文字动画特效。
35 6
|
1月前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
|
1月前
|
前端开发
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性,包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流,向左或右排列,周围元素随之调整。文章还详细讲解了清除浮动的方法,如使用clear属性、设置父元素高度、利用overflow属性、伪元素等,以解决因浮动导致的布局问题。最后,强调了浮动在创建复杂布局时的作用,并预告后续内容。
36 2
|
1月前
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下,画面中的文本呈现过山车的轨迹动画上下滚动转圈,且伴随文本颜色渐变效果,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
23 1
|
1月前
|
前端开发 JavaScript
如何利用 CSS3 动画实现元素的淡入淡出效果?
在上述代码中,定义了一个名为 `fade-in` 的CSS类,其初始透明度为0,并设置了淡入的过渡效果。当通过JavaScript为元素添加 `active` 类时,元素的透明度变为1,实现淡入效果;当再次点击按钮移除 `active` 类时,元素又会逐渐淡出。通过这种方式,可以根据用户的操作灵活地控制元素的淡入淡出效果。
173 3
|
1月前
|
前端开发 容器
实现CSS品字布局
【10月更文挑战第27天】