为什么'float'css属性会影响父级同级别的div?[英] Why the 'float' css attribute influence parent sibling div?

本文是小编为大家收集整理的关于为什么'float'css属性会影响父级同级别的div?的处理方法,想解了为什么'float'css属性会影响父级同级别的div?的问题怎么解决?为什么'float'css属性会影响父级同级别的div?问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

我有这个简单的html代码,我想知道为什么父兄弟姐妹div受Float CSS arrtibute的影响. Float是相对于窗口而不是float arrti的元素?

.floatLeft {
  float:left;
}
<div >
  <img class="floatLeft" src="https://i.stack.imgur.com/xdrQi.jpg?s=48&g=1"/>
  <p>test</p>
</div>
<div>
  <p>test1</p>
</div>

推荐答案

那是因为父元素崩溃了.请参阅大崩溃.

发生这种情况的原因是因为否则几乎没有办法将您的文本包裹在图像上.因此,父折叠到其非浮动内容所需的最小高度,下一个DIV只是向上移动,其内容也尊重图像的浮标.这样,您可以轻松地创建这类文本布局,否则几乎是不可能的.

如果您不想要任何原因,则可以 clear 第二div,因此它不会在图像旁边漂浮,有多种方法可以做到这一点,但是一个常见一种是将伪元素用作" clearfix"元素.该解决方案的优点是,您不需要任何其他标记,除了可能的ID或类以识别要清除的元素.

在下面的示例中,我只是添加了一个CSS的片段,该摘要找到了第一个Div,并样式为::after pseudo-Element,因此就像您在第一个Div的内容之后插入清除元素一样.

这将迫使第一个div生长至图像以下,因此第二个div被强制卵子.

您可以在第一个div中添加一个类以选择它,但是为了参数,我使用了选择器div:first-child::after,因此我可以将您的示例的标记放在完全未触及的情况下:

.floatLeft {
  float:left;
}

div:first-child::after {
  content: "";
  display: block;
  clear: both;
}
<div >
  <img class="floatLeft" src="https://i.stack.imgur.com/xdrQi.jpg?s=48&g=1"/>
  <p>test</p>
</div>
<div>
  <p>test1</p>
</div>

有关浮子主题的更多信息,包括进行清晰修复的各种方法,请参阅优秀关于floats的全部

其他推荐答案

    .floatLeft {
      float:left;
    }
    .clear:after {
      content: '';
      display: block;
      clear: both;
    }
    <div class="clear">
      <img class="floatLeft" src="https://i.stack.imgur.com/xdrQi.jpg?s=48&g=1"/>
      <p>test</p>
    </div>
    <div>
      <p>test1</p>
    </div>
 

本文地址:https://www.itbaoku.cn/post/866183.html