CSS：浮动图像[重复]答案

【问题标题】：CSS: Float Image [duplicate]CSS：浮动图像[重复]
【发布时间】：2014-06-20 10:43:50
【问题描述】：

为什么 float:left 和 float:right 元素会导致我的网页被压扁？

当我尝试浮动：左或浮动：右时会发生这种情况。 http://prntscr.com/3fx03d

页面似乎忘记了图片占用页面空间

解决此问题的唯一方法是在 HTML 代码中图像的最底部使用"<p>...</p>"，然后它会如下所示。 http://prntscr.com/3fx13l

这是怎么回事？

是的，我已确保事先指定图像的大小。

HTML

    <div id="main-content">
<h2>Images</h2>
<div class="images">
<img src="images/Home_Pic1.jpg" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic2.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic3.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic4.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic5.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic6.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic7.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic9.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic8.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic10.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic11.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic12.png" alt="Motivational Image" width="250" height="150">
</div>
<p align="center">...</p>
</div>

<footer>

<p>&copy; Copyright 2014 All rights reserved </p>

<ul>
<li><a href="#"><img src="images/rss.png" width="16" height="16" /></a></li>
<li><a href="#"><img src="images/facebook.png" alt="Facbook" width="16" height="16" /></a></li>
<li><a href="#"><img src="images/twitter.png" alt="Twitter" width="16" height="16" /></a></li>
<li><a href="#"><img src="images/share.png" width="16" height="16" /></a></li>
<li><a href="#"><img src="images/bloggr.png" width="16" height="16" /></a></li>

<li><a href="#"><img src="images/google-plus.png" width="16" height="16" border="0" /></a></li>



</ul>




</footer>


</div> <!--end of wrapper-->

CSS：

div.images{
    position:relative;
    left:0px;
    float:left;
    width:765px;
    margin:0px -5px;
    }

【问题讨论】：

能否贴出有问题的相关代码？
很难从图片中看出你在问什么。你能创建一个jsfiddle.net 吗？

标签： html css

【解决方案1】：

如果我正确理解您的问题，简而言之，浮动元素不会增加容器的高度。有多种方法可以纠正这种行为。浮动父元素，在父元素上指定 overflow: hidden 或使用 clearfix hack http://css-tricks.com/snippets/css/clear-fix/。

stackoverflow 上有一篇非常深入的文章：

Why doesn't the height of a container element increase if it contains floated elements?

【讨论】：

我搜索了这个主题，但找不到任何内容。 Stackoverflow 需要让查找东西变得更容易