BFC

BFC（块级格式化上下文）

• BFC是啥不重要，重要的是它能干啥

如何触发BFC

• display: flow-root (触发bfc 没有任何副作用)

BFC可以解决的问题

• 父元素包裹浮动的子元素，父元素高度坍塌
• margin塌陷

BFC + 浮动 实现多栏布局

• 三栏布局（左右固定，中间自适应）

	<style>
        *{
            padding: 0;
            margin: 0;
        }

        .left,.right{
            width: 100px;
            height: 100px;
            float: left;
            background-color: #fac;
        }
        .right{
            float: right;
        }
        .center{
            height: 150px;
            background-color: #cfa;
            display: flow-root;
        }
    </style>
    
	<div class="wrapper">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>

• 两栏布局（左或右固定，中间自适应）

左固定，中间自适应

	<style>
        *{
            padding: 0;
            margin: 0;
        }

        .left{
            width: 100px;
            height: 100px;
            float: left;
            background-color: #fac;
        }
  
        .center{
            height: 150px;
            background-color: #cfa;
            display: flow-root;
        }
    </style>
    
	<div class="wrapper">
        <div class="left"></div>
        <div class="center"></div>
    </div>

右固定，中间自适应，原理同上