为了更容易看出浮动元素是普通的流覆盖效果，我给粉色的div添加了透明度，可以直接看到它覆盖了蓝色div中的黄色div。同时，因为文字会包围浮动的div，所以黄色div的文字放在了粉色div的下面（float的本意是实现文字环绕）absolute和fixed比floating更容易理解。你可以自己做。display:none会让dom节点不在渲染树中，也不会分配空间。Formattingcontext）是W3CCSS2.1中的一个概念，指的是页面的一个渲染区域，有相应的渲染规则（BFC和IFC），决定了子元素如何定位，以及与其他元素的关系和交互elements而BFC是BlockFormattingContexts，触发BFC特性的元素会有效果如下（本人翻译水平低，内容来自W3CBFC）：在一个BFC下，block子元素会垂直排列，并在垂直方向合并一个margin。BFC中元素的左外边缘会触及BFC容器的左边缘（右边类似，这个元素也包括浮动元素）。结合以上两点，各种博客上都有这样的总结：原理BFC元素性能的最大特点是无论内部子元素如何湍流，都不会影响外部元素。所以，避免Margin穿透，清浮什么的很容易理解。（摘自张新旭的博客https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout）什么情况下会触发BFC，主要是作为如下：本例中的根元素，即HTML标签浮动元素：float值为left，rightoverflow值为不可见，auto，scroll，hidden显示值为inline-block，table-cell，table-caption，table,inline-table,flex,inline-flex,grid,inline-grid定位元素：位置值是绝对的，fixedtips：W3C文档中对触发器的描述比较清楚：浮动，绝对定位元素，块容器（如inline-blocks,table-cells,和table-captions）不是块框，以及带有“overflow”而不是“visible”的块框（除非该值已经传播到视口）为其建立新的块格式化上下文内容。BFC的应用有很多，了解了BFC的特性之后，很多操作也知道了同一个BFC下避免margincollapse的原理：