CSS使用BFC规则布局引发外层div包裹内层div的处理方法

BFC（Block Formatting Context），即块级格式化上下文，是CSS中的一个重要概念。它是页面中的一块渲染区域，并且有一套自己的渲染规则。它规定了内部元素如何布局，以及元素与外部元素的关系和相互作用。 BFC布局规则主要包括以下几点： 1. 内部的Box会在垂直方向，一个接一个地放置。 2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。 3. 每个元素的marginbox的左边，与包含块borderbox的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是这样。 4. BFC的区域不会与float box重叠。 5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此。 6. 计算BFC的高度时，浮动元素也参与计算。 要创建一个新的BFC，可以给容器添加任何一个触发BFC的CSS样式，例如overflow:scroll, overflow:hidden, display:flex, float:left, 或者display:table。每种样式都会有一些额外的副作用，例如overflow:scroll可能会显示不必要的滚动条，float:left将会把元素置于容器的左边，其他元素环绕着它，overflow:hidden将会剪切掉溢出的元素。因此，在创建BFC时，我们需要根据具体需求选择合适的样式。 在BFC布局中，可能会出现外层div包裹内层div的情况。这通常发生在内层div使用了float和margin属性时。为了解决这个问题，有以下两种主要的解决方法： 1. 利用clear属性，清除浮动。可以在父元素上添加一个class，然后通过添加CSS样式来清除浮动，例如使用zoom:1和display:table来清除浮动。 2. 使父容器形成BFC。通过给父容器添加overflow:hidden属性，可以使其形成一个新的BFC，从而避免父容器被内部浮动的div包裹。这是因为BFC内部的元素和外面的元素不会相互影响。 在实际应用中，根据具体情况选择合适的方法来处理BFC布局引发的外层div包裹内层div的问题。在创建BFC时，应考虑不同属性可能带来的副作用，选择最适合当前布局需求的样式。通过清除浮动或创建新的BFC，可以有效地解决布局中出现的问题，保证页面的布局效果符合设计预期。