什么是BFC以及应用！

什么是BFC以及应用

BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box（块）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC的布局规则

一、内部的Box会在垂直方向，一个接一个地放置。
二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
三、每个元素的margin box的左边， 与包含块border box的左边相接触四、BFC的区域不会与float box重叠。
五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
六、计算BFC的高度时，浮动元素也参与计算哪些元素或属性
能触发BFC根元素(html)float属性不为noneposition为absolute或fixeddisplay为inline-block, table-cell, table-caption, flex, inline-flexoverflow不为visible。

• 在设置了overflow: hidden;触发bfc的元素，会剪切掉该元素之外的内容，所以在该元素设置定位后一点超出该元素的范围，则不会显示但是会占用空间，所以在需要定位的元素尽量不要使用这种方式清除浮动或者触发bfc。

BFC的应用

1、自适应两栏布局
2、清除内部浮动
3、防止margin上下重叠

• 在两个盒模型浮动后，会脱离文本流可以利用这一特性进行操作给同级元素加另一个bfc一般添加overflow:hidden; 因为bfc规定两个独立的bfc不会重叠，
• 在全屏的布局中需要将html,body高度设置为100%。

双翼布局

        `*{
            margin:0;
            padding:0;
        }
        body,html{
            height:100%;
        }
        .left-box,.right-box{
            width:200px;
            height:80%;
            background:rosybrown;
        }
        .center-box{
            height:100%;
            background:pink;
            overflow:hidden
        }
        .left-box{
            float:left;
        }
        .right-box{
            float:right;
        }

    <div class="left-box"></div>
    <div class="right-box"></div>
    <div class="center-box"></div>

原理：左右浮动会脱离文本流，.center-box触发bfc后形成独立区域，overflow:hidden会剪切掉之外的内容

用 padding实现双翼布局

   ` *{
        margin:0;
        padding:0;
    }
    body,html{
        height:100%;
    }
    .left-box,.right-box{
        width:200px;
        height:80%;
        background:rosybrown;
    }
    .center-box{
        height:100%;
        background:pink;
        padding:0 200px;
    }

    .left-box{
        float:left;
    }
    .right-box{
        float:right;
    }


    .con{
        height:100%;
        background:#ccc;
    }
</style>`

    <div class="left-box"></div>
    <div class="right-box"></div>
    <div class="center-box">
        <div class="con">
            
        </div>
    </div>

原理：左右两个左右浮动中间部分用padding，控制左右=內边距左右的距离实现。

bfc解决margin:上下重叠问题

    div{
        width:200px;
        height:200px;
    }
    .box1{
        background:orange;
        margin-bottom:100px;
    }
    .box2{
        background:purple;
        margin-top:50px;
    }
    .box{
        overflow:hidden;
    }

    <div class="box1"></div>
    <div class="box">
        <div class="box2"></div>
    </div>

原理：运用了bfc独立渲染区域独立的特点，使得分为bfc区域

bfc实现两栏布局

   *{
            margin:0;
            padding:0;
        }
        body,html{
            height:100%;
        }
        .left_box{
            width:200px;
            height:100%;
            background:orange;
            float:left;
        }

        .right_box{
            height:100%;
            background:pink;
            overflow:hidden;
        }

    <div class="left_box"></div>
    <div class="right_box"></div>

原理；左边浮动，右边设置个overflow:hidden;，因为这个属性触发了bfc使得右边的元素内容成为以一个独立的区域

bug表单对不齐现象处理

		input{
			border: 0;
		}
		.tit{
			width: 200px;
			height: 40px;
			line-height: 40px;
			float: left;
			border: 1px solid saddlebrown;
			
		}
		.tj{
			width: 40px;
			height: 40px;
			line-height: 40px;
			float: left;
			border: 1px solid firebrick;
		}
		.tj1{
			
			width: 40px;
			height: 40px;
			line-height: 40px;
			float: left;
		}
		.box{
			width: 300px;
			height: 300px;
			background: sandybrown;
			opacity:.5;
		}
		.box1{
			width: 200px;
			height: 100px;
			background: seagreen;
			opacity:.5;
		}

<input type="text" id="" value=""  class="tit"/>
<span class="tj"><input type="submit" id="" class="tj1"/></span>

需要给每个元素添加一个浮动，2去掉原有的边框3在按钮的外面套个元素进行操作外边框，设置按钮高度，属性在span元素中设置，