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>img&floattitle>
<style>
.container {
margin: 15px;
background-color: bisque;
height: 700px;
}
.f {
float: left;
width: 150px;
height: 150px;
background-color: #ffc0cb;
}
img {
display: block;
}
style>
head>
<body>
<div class="container">
<div class="f">div>
<img src= "https://www.bing.com/th?id=A394d826e2e24c2049c57ef963cf2df64&w=180&h=270&c=4&rs=1&qlt=80&o=6&pid=SANGAM" alt="Batman">
div>
body>
html>
图片与浮动元素始终并排显示，它们还在同一层吗？
为img添加 margin: 0 auto发现它会在剩下的宽度里居中。
当你为div设置浮动的时候，他就脱离文档流了，但是没有脱离文本流，其他盒子里面的文字或者内联元素会给它留位置，它多胖就给他留多少，不会挤掉他的位置，所以你看到的并排显示就是文本流决定的，但浮动元素确实已经脱离文本流，与图片不在同一层。既然文本流上不会占据他的空间，那在margin：auto的时候，子元素图片左右margin将会平分剩余“可用空间”