Question

我试图在浮动图像后用div清除浮动但图像仍然在包装器之外

这种clearfix的方法通常是有效的 - 我做错了什么？

＆＃13;

<!Doctype html>

<html>

<head>
  <style>
    #wrapper {
      width: 600px;
      border: 2px solid black;
    }
    #wrapper p {
      float: left;
      width: 200px;
      margin-left: 10px;
    }
    #wrapper img {
      float: right;
    }
    #wrapper .clearfix {
      overflow: auto;
      border: none;
    }
  </style>
</head>

<body>
  <div id="wrapper">

    <p>
      This image is taller than the element containing it, and it's floated, so it's overflowing outside of its container!
    </p>

    <img src="picture.jpg" />

    <div class="clearfix">
    </div>

  </div>
</body>

</html>

＆＃13;

Answer 1

如果要使用溢出方法清除浮点数，则应在父元素上设置overflow: auto;。

以下是codepen

HTML

<div id="wrapper">

  <p>
    This image is taller than the element containing it, and it's floated, so it's overflowing outside of its container!
  </p>

  <img src="picture.jpg" />

</div>

CSS

 #wrapper {
   overflow: auto;
   width: 600px;
   border: 2px solid black;
 }

 #wrapper p {
   float: left;
   width: 200px;
   margin-left: 10px;
 }

 #wrapper img {
   float: right;
 }

Answer 2

您的clearfix类在这里是错误的。它应该是

wrapper .clearfix { 明确：两者; }

所以你要清除前后的花车。

您必须将overflow:auto应用于#wrapper

包装{ 宽度：600px的; 边框：2px纯黑色; 溢出：自动; }

Answer 3

＆＃13;

#wrapper {
margin: 10px;
border: 2px solid #000;
background: #A00;
color: #FFF;
height:auto;
overflow:auto;
width:600px;
}
 #wrapper p{
        float:left;
        width:200px;
        margin-left:10px;
        }
#img{
float:right;
height:auto;
}

＆＃13;

<div id="wrapper">
<p>
            This image is taller than the element containing it, and it's floated, so it's overflowing outside of its container! 
        </p>

    <div id="img"> <img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s1600/tall+copy.jpg"    style="margin: 10px 10px; "/>

      </div>
    </div>

＆＃13;

为什么图像溢出包装器外？

3 个答案: