irpas技术客

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

未知 3060

📋 个人简介 💖 作者简介:大家好,我是阿牛😜📝 个人主页:馆主阿牛🔥🎉 支持我:点赞👍+收藏??+留言📝📣 系列专栏:css🍁💬格言:迄今所有人生都大写着失败,但不妨碍我继续向前!🔥


上期传送门: 👉css中的选择器 👉css盒子模型及其实战案例(上) 👉css盒子模型及其实战案例(下) 👉css网页布局之浮动及其实战案例(超详细) 👉css中的定位详解 👉css中元素的显示与隐藏 👉我用css精灵图拼接了自己的英文名字,不会还有人不知道精灵图技术吧 👉css三角的做法及其案例 👉css布局技巧-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>


1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。