blocks|key|815349|text|这一点也不出乎意料。.sidebar通过其float属性从常规流布局中删除，因此不再占用任何空间。.footer有一个clear规则，所以它在任何浮动之下都是强制的，但这会自动地将它放在最后一个元素后面，即是流布局的部分。因此，它的20+at的裕度要求完全满足，并出现在它的逻辑当前位置。您可以通过将上边距设置为220+5px来验证这一点，它将出现在侧栏下面的5+5px+(220-215)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|815350|您可以很容易地通过将margin-bottom:20px放在侧边栏上来实现您想要的效果，因为它将被要求保持与页脚的距离，并将其向下推。|815351|entityMap^0|A|8|L|5|1D|7|1N|5|2V|5|0|A|I|0^^$0|@$1|2|3|4|5|6|7|K|8|@$9|L|A|M|B|C]|$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|V|8|@$9|W|A|X|B|C]]|E|@]|F|$]]|$1|I|3|-4|5|6|7|Y|8|@]|E|@]|F|$]]]|J|$]]

This is not unexpected at all. The <code>.sidebar</code> is removed from regular flow layout by its <code>float</code> property, as such it doesn't take up any space anymore. The <code>.footer</code> has a <code>clear</code> rule, so it is forced underneath any floats, but that automatically puts it 215px (margin+height of the sidebar) behind the last element that is part of the flow layout. As such its margin requirement of 20px is completely satisfied, and it appears at its logical current position. You can verify this by setting the top margin to 220px instead, it will appear 5px (220-215) below the sidebar.

You can easily achieve the effect you desire by putting <code>margin-bottom:20px</code> on the sidebar since it will then be required to keep that distance to the footer, pushing it down.

blocks|key|2136669|text|这个问题与明确的规则有关。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2136670|W3C+--一个已经对其应用了权限的元素，它永远不会与父块的底部边缘一起折叠它的上边距。|blockquote|offset|length|2136671|如果您想使用clear，一般规则是在两个浮动的div之间添加一个元素，以确保您能够正确地对它们进行空间设置。|2136672|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS21/box.html#collapsing-margins^0|0|0|3|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@$E|S|F|T|1|U]]|A|$]]|$1|G|3|H|5|6|7|V|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

The issue is related to the clear rule.

<blockquote>
 <a href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" rel="nofollow">W3C</a> - An element that has had clearance applied to it never
 collapses its top margin with its parent block's bottom margin.
</blockquote>

Baiscally, if you want to use clear, the general rule is to add an element between the two floated divs to ensure you can correctly space them.

blocks|key|2136685|text|这是因为浮动元素实际上并不存在于保证金计算中。您的.footer低于它上面的任何未浮动元素(保证金为20+of+)。造成此问题的原因是，相对于其他浮点数(并非所有其他元素)，计算浮动的边距。因此，为了获得所需的效果，向.sidebar添加一个页边距底部元素，将一个无意义的浮点数添加到.footer中，或者添加一个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2136686|<div+style="clear:both"></div>|code-block|syntax|javascript|2136687|在.footer和.sidebar之间|2136688|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This is caused by the fact that floated elements aren't really there with respect to margin calculations. Your .footer is below whatever unfloated elements are above it, (with a margin of 20px). This issue is caused because margins with respect to floats are calculated relative to other floats, (not all other elements). 
So to get the desired effect add a margin-bottom element to .sidebar, have a meaningless float added to the .footer, or add a 

<pre><code>&lt;div style="clear:both"&gt;&lt;/div&gt;
</code></pre>

between the .footer and .sidebar

blocks|key|2925145|text|页脚div的顶部边缘正在折叠，http://www.w3.org/TR/CSS21/box.html#collapsing-margins。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2925146|如果您添加边栏底部的边栏，而不是页脚的顶部，它将工作。|2925147|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS21/box.html#collapsing-margins^0|F|1I|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

The top margin of the footer div is being collapsed, <a href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" rel="nofollow">http://www.w3.org/TR/CSS21/box.html#collapsing-margins</a> 

If you add margin-bottom to the sidebar instead of the top of the footer it will work.

Here is my <a href="http://jsfiddle.net/zwJjY/" rel="nofollow">jsFiddle</a>

I just have 3 <code>div</code>s. The 2nd <code>div</code> is floated to the right, and 3rd <code>div</code> appears just below the 2nd.

In the 3rd <code>div</code>, I am setting <code>margin-top</code> property, and this property does not have any effect on the layout. 

Question: Can someone explain me understanding this behavior of float?

HTML

<pre><code>&lt;div class="header"&gt;
&lt;/div&gt;
&lt;div class="sidebar"&gt;
&lt;/div&gt;
&lt;div class="footer"&gt;
&lt;/div&gt;
</code></pre>

CSS

<pre><code>.header {
 width: 100%;
 height: 80px;
 background-color: #abcdef;
}

.sidebar {
 margin-top: 15px;
 float: right;
 width: 200px;
 height: 200px;
 background-color: #abcdef;
 display: block;
}

.footer {
 clear: both;
 margin-top: 20px;
 width: 100%;
 height: 60px;
 background-color: #000000;
}
</code></pre>

Unexpected behavior of css float

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

这是我的我只有三个divs，第二个div在右边，第三个div就在第二个下面。在第三个div中，我设置了margin-top属性，该属性对布局没有任何影响。问:有人能解释我理解浮子的行为吗？<div class="header"></div><div class="sidebar"></div><div class="f...

问css浮动的意外行为
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css浮动的意外行为EN