今天公司有一个 task ，在展示文章列表时，如果某个文章有缩略图，那么 summary 环绕缩略图排布。这是一个非常简单的问题， float:left 完美解决。但是，难点是在 summary 后面要跟着一行 post meta ，显示作者、评论数等等，没有缩略图时， post meta 直接跟着 summary 就可以了，但是，有缩略图时就会略显繁琐，分两种情况：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> img { float: left; } .text::after{ content: "."; visibility: hidden; display: block; clear: both; height: 0; font-size: 0; } </style> </head> <body> <img src="https://lh4.googleusercontent.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s0-c-k-no-ns/photo.jpg" width="400px"/> <div class="text"> This is summary. This is summary. This is summary.<br /> This is summary. This is summary. This is summary.<br /> This is summary. This is summary. This is summary.<br /> This is summary. This is summary. This is summary.<br /> This is summary. This is summary. This is summary.<br /> </div> <div class="meta"> This is meta. This is meta. This is meta. </div> </body> </html>
@jarlyyn 同学，概念搞混了，正常文本流指 position:static 的元素，对应于绝对定位、相对定位和固定定位。浮动是指环绕块级元素排列， meta 在内容少的时候就是环绕图像排布的， 25L 的方法中， meta 左侧的缩减就是图像 float 属性导致的，但是我不太明白前面元素的 after 伪类明明已经通过 clear:both 清除了两端的浮动，为什么 meta 还是会左侧环绕。