html css float不环绕图像顶部，

Question

我使用margin-top: 70px将图像浮动到段落的右侧。

文字在图片下方浮动，但不在图片上方浮动。

如何使文本流过图像的顶部，如提供的图像中的红色矩形所示。我在屏幕截图中添加了红色矩形，它不是html或css固有的。

.floatright {
  float: right;
  border: 1px solid black; 
  margin-top: 70px; 
}

img {
  width: 100px;
  height: 100px;
}

<p>
  <img class="floatright" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Regular_polygon_3_annotated.svg/1200px-Regular_polygon_3_annotated.svg.png" alt="foo"/>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>

Answer 1

您可以使用shape-outside

div {
    float: left;
    border: 1px solid black;
    margin-top: 50px;
    width: 150px;
    shape-outside: border-box;
}
img{
  max-width: 100%;
}
p{
  float:none;
}

<div>
  <img class="floatright" src="https://cdn-images-1.medium.com/max/2000/1*kOuvkQUrByiaqZYTZFJz4g.png" alt="foo"/>
</div>
<p>
Lorem ipsum dolor sit amet, cu quo duis aperiam, id has ferri placerat suavitate. Vis oratio bonorum ei, discere delicata pro no. Erant maiestatis et cum. Est iusto veritus et, liber tollit sensibus his eu. Eam cu errem persius.

Sumo accusata eam id. Te expetenda iudicabit delicatissimi ius. Nec ut laoreet argumentum, sed ad erat libris. Vim ullum omnium te. Mel mazim noster delicatissimi no, conceptam philosophia vim ea, vix esse soleat mucius in. Ne quod explicari pri, eam diceret nonumes accumsan id.

Lorem ipsum dolor sit amet, cu quo duis aperiam, id has ferri placerat suavitate. Vis oratio bonorum ei, discere delicata pro no. Erant maiestatis et cum. Est iusto veritus et, liber tollit sensibus his eu. Eam cu errem persius.

Sumo accusata eam id. Te expetenda iudicabit delicatissimi ius. Nec ut laoreet argumentum, sed ad erat libris. Vim ullum omnium te. Mel mazim noster delicatissimi no, conceptam philosophia vim ea, vix esse soleat mucius in. Ne quod explicari pri, eam diceret nonumes accumsan id.

Lorem ipsum dolor sit amet, cu quo duis aperiam, id has ferri placerat suavitate. Vis oratio bonorum ei, discere delicata pro no. Erant maiestatis et cum. Est iusto veritus et, liber tollit sensibus his eu. Eam cu errem persius.

Sumo accusata eam id. Te expetenda iudicabit delicatissimi ius. Nec ut laoreet argumentum, sed ad erat libris. Vim ullum omnium te. Mel mazim noster delicatissimi no, conceptam philosophia vim ea, vix esse soleat mucius in. Ne quod explicari pri, eam diceret nonumes accumsan id.


 </p>

参考css shape的Jus不支持IE和Edge

https://caniuse.com/#feat=css-shapes

Answer 2

您需要在图像上使用shape outside。

如果您在此处启用我的border-radius，它也将与椭圆一起使用。

也-请注意，我将您的图片放在段落的外面/旁边

.yourImage {
    width: 400px;
    height: 250px;
    /* border-radius: 50%; */
    float: right;
    shape-outside: content-box;
    padding: 10px;
    background-color: MediumPurple;
    background-clip: content-box;
    margin-top: 50px;
    display: inline-block;
}

<img class="yourImage" src="whatever">

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
  of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
  Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
  text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
  in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Answer 3

查看代码：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Float basic</title>
<style> 
.body{
    margin: 0;
    padding: 0px;
}
 .floatright { float: right;
               border: 1px solid black; 
               margin-top: 10px ; 
               height: 150px;
               width: auto;
                } 
}

#txt1{
    margin-left: 10px;
    margin-right: 10px;
    float: left;
}


</style> 

</head>

<body>
<img class="floatright" src="img.png" alt="Java"/>
<p id="txt1">ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>


<p id="txt1">ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="txt1">ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>

enter image description here