CSS块格式化上下文如何工作？
CSS2.1规范说,在块格式化上下文中,框从顶部开始垂直排列.即使路径中存在浮动元素,也会发生这种情况,除非块框建立了新的块格式化上下文.我们知道,当浏览器在块格式化上下文中渲染块框时,浮动元素被省略,为什么建立新的块格式化上下文有效？
盒子(块盒和内联盒)如何在正常流程中布局？
我在某处看到块元素生成块框,但当用户代理绘制框并在填写内容时将其考虑在内时,将忽略浮动元素.虽然浮动元素将与框的其他元素边界重叠,但解决方案是使用重叠元素为重叠元素建立新的块格式化上下文overflow:hidden.
"新的块格式化上下文仍然是块格式化",因此在绘制框时,它还会将浮动元素视为不退出.这是对的还是我误解了"新的块格式化上下文？"
通过说"这是对柱状样式布局有用的行为.然而,它的主要用途是停止浮动,例如在"主要内容"div中,实际上清除浮动的侧列,即在源代码中出现的浮动."
我不明白其中的含义,我会提供一个例子,也许你会理解我.
.content {
background: #eee;
color #000;
border: 3px solid #444;
width: 500px;
height: 200px;
}
.float {
background: rgba(0, 0, 255, 0.5);
border: 1px solid #00f;
width: 150px;
height: 150px;
float: right;
}
p {
background: #444;
color: #fff;
}<div class="content">
<h3>This is a content box</h3>
<p>It contains a left floated box, you can see the actual content div does go under the float, but that it is …css ×1