float vs. inline-block更改边距和父级高度

Question

所以我一直试图围绕这一点思考并且无法弄清楚原因。

注意：保证金和填充为0。

第一个例子是

<div> <!-- Gray Box -->
   <div> <!-- Purple Box -->

   </div>
</div>

我有两个图像 - 一个是浮点数，另一个是内联块。

div的高度以灰色显示。

float: left;

display: inline-block;

第二个例子是

<div>
  <ul>
    <a href = "#">
      <li>
        <img src = "...">
      </li>
    </a>
  </ul>
</div>

同样，left和inline-block做了不同的事情

float: left;

display: inline-block;

底线

欢迎提出问题旁边的任何建议。 我不知道边缘/填充为什么会发生变化以及为什么div大小会浮动和显示。感谢

Answer 1

这里有两个问题。

1）与评论中提到的人一样，内联块会占用空间，这意味着你应该拥有父div：

font-size:0;

2） Floating从文档流中取出元素，这意味着父元素只会扩展到最后一个非浮动的子元素。要解决这个问题，你应该在你的css中放一个clearfix类，并将它添加到浮动元素的父级。

.clearfix::after{
   content:'';
   display:block;
   clear:both;
}

所以一旦你完成了这个，你的第一个例子应该是这样的：

<div class="clearfix"> <!-- Gray Box -->
   <div style="float:left"> <!-- Purple Box -->
   </div>
</div>

现在灰盒子应该越过紫色盒子; 作为一致性问题，我不认为你应该将内联块与浮动混合。一，它不会在相同的元素和2上工作，它们是针对不同的东西而设计的。