Question

为什么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;
    }

Answer 1

如果我正确理解您的问题，简而言之，浮动元素不会增加容器的高度。有许多方法可以纠正这种行为。浮动父元素，指定overflow：隐藏在父元素上或使用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?

CSS：浮动图像

1 个答案: