在我们简单的使用了图文混排，今天升华之！
还是在body中添加一个p、img。
这次换一个，赫拉利在《未来简史》中，个人和喜欢的一段话：
如果用时光机把现代科学家送回古埃及，就算他用进化论、相对论、量子力学戳破了古代埃及祭司的一切虚构。
还是无法在当时拥有权力。当然，如果这位科学家可以运用知识制造出墙炮，就能在面对法老和鳄鱼神索贝克时大占优势。
但为次，他必须开采铁矿、建造鼓风炉、制造火药、也就是需要许多辛勤的农民。你真的觉得，和农民大谈E=mc2，就能让他们对你言听计从？
如果你真这么想，欢迎现在买张到阿富汗或者叙利亚的机票，在那里好好施展你的才华！是不是很有趣的作者？！
图片，就用小天才养殖场的守护神——
代码如下：
!DOCTYPEhtml
html
head
metacharset="utf-8"
title/title
styletype="text/css"
/style
/head
body
imgsrc="神兽.png"alt="神兽"
p如果用时光机把现代科学家送回古埃及，就算他用进化论、相对论、量子力学戳破了古代埃及祭司的一切虚构。还是无法在当时拥有权力。当然，如果这位科学家可以运用知识制造出墙炮，就能在面对法老和鳄鱼神索贝克时大占优势。
但为次，他必须开采铁矿、建造鼓风炉、制造火药、也就是需要许多辛勤的农民。
你真的觉得，和农民大谈E=mc2，就能让他们对你言听计从？如果你真这么想，欢迎现在买张到阿富汗或者叙利亚的机票，在那里好好施展你的才华/p
/body
/html
默认效果：
默认排版是不是很恶心呢，因为img标签和p标签都是块状元素。
而且，一个在前一个在后，因此在实际显示中，二者彼此分开。
从砖业术语上将：
这是最普通的文档流（Normalflow），即每一个块状元素各自垂直堆叠，自上而下排布。
现在通过CSS样式，实现二者混排
添加img样式标签：
img{
float:left;
margin:3px;
}
效果图：
是不是一下就感觉不错了。
不建议直接在img标签，使用aling:"left"。
H5官方已渐渐就放弃这种强烈破坏语义化的代码用法！
通过Css设置左浮动后，上下排列就变成左右排列了。
margin值，使得图片和文字间保持3px距离，而不是紧贴在一起。
继续修改，img样式表：
img{
float:left;
margin-right:10px;
width:55px;
}
效果图：
缩小图片宽度为55px，设置图片右外边距10px。
浮动后p元素段落占据了原有图片的位置，两者其实位置编程一样的了。
其实这种混排，收到图片宽度，影响有一个最适缩紧。
当放大字体后，缩紧也会变化，修改p文字大小和样式
img{
float:left;
margin-right:10px;
width:80px;
}
p{
font-family:"STheiti";
font-size:33px;
}
效果图：
直接在body中，在添加一个图片：
代码：
imgsrc="FishC.png"alt="鱼CLogo"
效果图：
看到了吗，添加的新图虽然尺寸很大，但是会自动缩小和之前的图片一样，连浮动位置都一样。
未完待续
如果喜欢本系列HTML帖子
欢迎到鱼C论坛订阅专辑?
HTML5-庖丁解牛
戳原文，更有料！预览时标签不可点收录于合集#个上一篇下一篇