html图片靠右浮动 文字左侧环绕,CSS实现模拟float: center文字左右环绕图片的效果...

什么是文字左右环绕图片？就是下图的效果：

效果的CSS代码可以点击这里查看

在CSS中，并没有float: center这种设置，但是我们可以通过一些小技巧来模拟出类似的效果。

经常会有小伙伴问：有float: left和right，为什么没有float: center？我的答案是：

1.text-align: center已经可以实现内联元素的居中效果

2.在一行中使文字环绕显示在图片的两侧，这种效果浏览器处理起来是非常困难的。除非将文字显示为两列，但这是另一个问题

3.当涉及到文本时，float实际上应该被称为环绕，float:left的意思是“将这个元素放置在容器的左侧，并将其右侧的所有内容都环绕其显示”，在这种情况下，我们讨论的float:center实际上是两侧环绕，这会带来一系列的问题，比如如何确定元素在容器中的“深度”?

为了模拟实现float: center的效果，我们通过创建两个div将文字划分为两列，其中居中的图片写在第一个div中：

京都位于本州岛的中心附近，在王位移到江户...

因此࿰