默认情况下,浮动元素旁边是否会填充?

发布于 2025-01-04 23:41:55 字数 563 浏览 1 评论 0原文

我在里面设置了一个容器和三个 div。前两个是浮动的,第三个是不浮动的。 (添加第四个 div 只是为了阐述我的问题)

我已将前两个 div 的边框更改为透明以描述它更清楚的是,thirdDiv 是从firstDiv 开始,同时将其自身的内容(“THIRD”)放置在 secondaryDiv 的后面。

ThirdDiv(“THIRD”)的内容放置在 secondaryDiv 的后面

你可以看到thirdDiv实际上从一开始就有边框

那么,我的问题是,默认情况下,浮动元素 (thirdDiv) 旁边的操作会从该方向获取填充吗?因为它在我的代码中显示为 155px。

I have setup a container and three divs inside. First two are floated and third one is not floated. (fourth div is added just to elaborate my question)

I have changed border of first two divs to be transparent to depict it more clearer that thirdDiv is starting right from the firstDiv while placing content of itself ('THIRD') right after secondDiv.

Content of thirdDiv ('THIRD') is placed right after secondDiv

And you can see that thirdDiv is actually have border started right from the start

So, my question is that do next to floated element (thirdDiv) gets padding from that direction by default? As it showing to be 155px in my code.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

硪扪都還晓 2025-01-11 23:41:55

不,默认情况下非浮动元素不会填充。容器从浮动 div 下方开始。但是,div 中的内容遵循浮动并被推到右侧。如果将overflow:hidden应用于非浮动容器,那么它就会有一个“自动边距”,尊重浮动的div。 (您可以在此处看到这个 - 出现左边框。)

编辑:实际上它是喜欢一个padding,虽然没有padding!

隐藏溢出的示例

没有隐藏溢出且没有填充的示例

没有隐藏溢出和左侧填充的示例

注意边框和额外文本的位置!

编辑2:根据较大的值,应用由CSS定义的填充或计算的填充(浮动的宽度)。在每种情况下,您定义的填充和“计算浮动填充”都会崩溃!

No, the nonfloated elements don't get padding by default. the container starts underneath your floated divs. However, the content in the div respects the float and is pushed to the right. If you apply overflow:hiddento the non-floated container, then it has an "automatic margin", respecting the floated divs. (You can see this here - the left border appears.)

EDIT: effectively it is like a padding, although there is no padding!

Example with overflow hidden.

Example without overflow hidden and no padding

Example without overflow hidden and padding left

note the border and the placement of the extra text!

EDIT 2: depending on what the greater value is, either the padding defined by your css, or the calculated padding (width of the floats) is being applied. In every case, your defined padding and the "calculated-float-padding" do collapse!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文