如何使用float并且仍然在父div内有子div？答案

【问题标题】：How to use float and still have the child div inside the parent div?如何使用float并且仍然在父div内有子div？
【发布时间】：2026-02-21 08:10:02
【问题描述】：

我想在页面的中心放置三张图片。在下面的代码中，当我使用浮点数时，图像会跳出类“居中”的父 div。有什么方法可以将子 div 保留在父 div 中？

HTML：

<div class="centered">
  <div id="M">
    <img src="images/M.png">
    <img src="images/M.png">
    <img src="images/M.png">
  </div>
</div>

CSS：

.centered {
    margin-left: auto;
    margin-right: auto;
    border: 3px solid #73AD21;
    width: 1500px;
}

.centered img {
    display: block;
}

#M {
    float:left;
}

【问题讨论】：

Using :after to clear floating elements的可能重复
jsfiddle.net/4muaq1f7
我要并排放置3张图片
我已经更新了你的问题，因为在你原来的问题中你说我想把一张图片放在页面的中心然后你的下面的代码包含一个图像。将一排 3 张图片并排居中与将单张图片居中是完全不同的问题。
@Rounin - 是的，感谢您的编辑。

标签： html css

【解决方案1】：

您必须在 .centered div 之后添加 sudo 元素以清除其后的浮动。

.centered:after{
   content: "";
   display:table;
   clear:both;
}

【讨论】：

【解决方案2】：

如果你想使图像居中，给它一个宽度和一个auto的左右边距：

img {
display: block;
width: 100px;
height: 100px;
margin: 12px auto;
background-color: rgb(255,0,0);
}

&lt;img /&gt;

如果您想将图像居中在 1500px 宽 div.centered 内并带有 3px 绿色边框，请执行相同操作：

img {
display: block;
width: 100px;
height: 100px;
margin: 12px auto;
background-color: rgb(255,0,0);
}

.centered {
    margin: 0 auto;
    border: 3px solid #73AD21;
    width: 1500px;
}

<div class="centered">
<img />
</div>

【讨论】：