浮动元素会导致父母崩溃. html/css[英] Floating elements causes the parent to collapse. HTML / CSS

本文是小编为大家收集整理的关于浮动元素会导致父母崩溃. html/css的处理方法,想解了浮动元素会导致父母崩溃. html/css的问题怎么解决?浮动元素会导致父母崩溃. html/css问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

如果我有以下代码:

<div>
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>

父母将崩溃,似乎具有0px的高度.

所以我想这是一个已知的问题,并且有修复可用,但是我真的很想知道为什么首先发生.

有人可以解释吗?

我不在寻找任何CSS修复程序,它们已被覆盖在这里,我正在寻找有关为什么首先发生的解释.

推荐答案

由于您需要原因,我认为这个 post 很好.除了原因外,它还有一些解决方案来解决它.

关于浮点:

 when an element is floated it is taken out of the normal flow of the document. 
 It is shifted to the left or right until it touches the edge of it's containing
 box or another floated element.

参考: US/DOCS/WEB/CSS/FLOAT

关于清除:

The clear CSS property specifies whether an element can be next to floating 
elements that precede it or must be moved down (cleared) below them.

The clear property applies to both floating and non-floating elements.
When applied to non-floating blocks, it moves the border edge of the 
element down until it is below the margin edge of all relevant floats.
This movement (when it happens) causes margin collapsing not to occur.

When applied to floating elements, it moves the margin edge of the element
below the margin edge of all relevant floats. This affects the position of later
floats, since later floats cannot be positioned higher than earlier ones.

The floats that are relevant to be cleared are the earlier floats within the 
same block formatting context.

参考:美国/文档/web/css/clear

其他推荐答案

这是因为带有float属性的元素从文档流中删除,因此父元素的尺寸保持未知(因为其中没有包含),因此将其设置为0.使用overflow:auto使用浮动内部内容调整父height.

您的样本

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