BFC 解决 Float 乱跑

深碍√TFBOYSˉ_ 2022-12-21 03:21 115阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>BFC解决Float乱跑</title>
    </head>
    <style> .out { min-height: 20px; border: 2px solid red; overflow: hidden; } .in { height: 100px; background-color: grey; float: left;/* 没有添加float时，out是包住in的，但添加了float之后，in就脱离正常的文档流了。 */ } </style>
    <body>
    <pre>
        一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
        一个块格式化上下文由以下之一创建：
    
        根元素或其它包含它的元素
        浮动元素 (元素的 float 不是 none)
        绝对定位元素 (元素具有 position 为 absolute 或 fixed)
        内联块 (元素具有 display: inline-block)
        表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
        表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
        具有overflow 且值不是 visible 的块元素，
        display: flow-root
        column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
        一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。
        块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。
    
    </pre>
    
    
    <div class="out">
        <div class="in">没有添加float时，out是包住in的，但添加了float之后，in就脱离正常的文档流了。<br>这时，为out添加一个BFC就可以解决这个问题</div>
    </div>
    </body>
    </html>

![在这里插入图片描述][20201114124031701.png_pic_center]

[20201114124031701.png_pic_center]: /images/20221120/3c1915a369b74ecdae5b1d12c7c87774.png