为什么'float'css属性会影响父级兄弟分区？

Question

我有这个简单的html代码，我想知道为什么父兄弟div受浮动css arrtibute的影响。是浮动相对于窗口而不是阻止元素与浮动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>

Answer 1

这是因为父元素崩溃。见The great collapse。

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

如果你不希望这样无论出于何种原因，则可以明确的第二个div，因此它不会旁边漂浮的形象，有多种方法可以做到这一点，但常见的是使用一个伪元素作为'clearfix'元素。这个解决方案的优点是你不需要任何额外的标记，除了一个id或class来标识要清除的元素。

在下面的例子中，我刚刚添加了一个CSS代码片段，它找到第一个div，并为::after伪元素设置样式，这就好像您在第一个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>

有关花车的主题，包括各种方式做明确的修复，见CSS-tricks.com优秀All about floats更多信息。

Answer 2

.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>