Web前端学习—基础篇(26)_什么是BFC？如何生成BFC？BFC的特性的特性有哪些？BFC有什么用途？

4.20、BFC

4.20.1、什么是BFC？

• BFC-block formatting context 块级格式化上下文 W3C css2.1 概念
• 页面中的一个渲染区域
• web页面可视化，css视觉渲染的一部分，用于决定块级盒子的布局或浮动相互影响范围的一个区域
• 本质：一个封闭的盒子

4.20.2、如何生成BFC？

• 根元素
• float: left|right;
• position: absolute|fixed;
• display: inline-block;
• overflow: hidden|auto|scroll;

4.20.3、BFC的特性

• 1）内部元素在垂直方向上一个接一个放置
• 2）垂直方向上的外间距由margin值决定，属于同一个BFC区域的相邻的元素margin值会重叠
• 3）每个元素的左外间距与包含块的左边界相接触，浮动元素也是如此
• 4）BFC区域不会与浮动元素区域重叠
• 5）计算BFC高度时，浮动元素也会参与计算
• 6）BFC是页面上一个独立的渲染区域，容器中子元素不会影响到外面的元素，反之亦然

4.20.4、BFC解决的问题

• 外间距塌陷问题
• 清浮动问题
• 自适应两列或三列布局

结构中：
    <div class="wrap">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="center">中间内容</div>
    </div>
样式中：
    .left{
        width: 200px;
        min-height: 200px;
        background: yellow;

        float: left;
    }
    .right{
        width: 300px;
        min-height: 200px;
        background: pink;

        float: right;
    }
    .center{
        min-height: 200px;
        background: red;

        overflow: hidden;
    }

• 防止文字环绕

结构中：
    <div class="box">
        <div class="pic"><img src="images/ad16a.jpg" alt="pic"></div>
        <p>内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
    </div>
样式中：
    .box .pic{
        float: left;
        margin-right: 50px;
    }
    .box p{
        overflow: hidden;
    }


word-break: break-all; 换行显示