含有漂浮元素的挡路是什么?

What#39;s the containing block of floated elements?(含有漂浮元素的挡路是什么?)
本文介绍了含有漂浮元素的挡路是什么?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

In css2.1 spec,写着:

浮动框将向左或向右移动,直到其外边缘接触到包含挡路的边缘或另一个浮动的外边缘。

我想知道浮动元素的包含挡路是什么,我测试了一下:

body {
    position: relative;
    margin: 5px;
    padding: 10px;
}

p {
    float: left;
    position: absolute;
    margin: 10px;
}

<body>
    <p>hehe</p>
</body>

根据css2.1 spec,包含挡路的绝对定位元素是最近定位的挡路容器的填充盒。

但在上面的代码中,被浮动的元素被浮动到内容框边界。我不知道怎么找到浮动元素的包含挡路。

推荐答案

您问题的前提有缺陷。绝对定位的元素不能浮动,浮动也不能绝对定位。发件人section 9.7:

[.]如果‘position’的值为‘Absolute’或‘Fixed’,则该框是绝对定位的,‘Float’的计算值为‘None’[.]

所以您在这里不会试图找到包含浮点的挡路。您正在尝试查找已缩写元素的包含挡路。

话虽如此,如果您一定要知道,浮点数的包含挡路与我在my answer to your previous question中描述的相对定位或非定位元素是相同的,因为浮点数不能省略。

这篇关于含有漂浮元素的挡路是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

how to remove this error quot;Response must contain an array at quot; . quot;.quot; while making dropdown(如何删除此错误quot;响应必须在quot;处包含数组。创建下拉菜单时(Q;))
Why is it necessary to use `document.createElementNS` when adding `svg` tags to an HTML document via JS?(为什么在通过JS为一个HTML文档添加`svg`标签时,需要使用`Document.createElementNS`?)
wkhtmltopdf print-media-type uses @media print ONLY and ignores the rest(Wkhtmltopdf print-media-type仅使用@media print,而忽略其余内容)
price depend on selection of radio input(价格取决于无线电输入的选择)
calculate price depend on selection without button(根据没有按钮的选择计算价格)
What should I consider before minifying HTML?(在缩小HTML之前,我应该考虑什么?)