布局中的BFC和margin负值--学习笔记

学习内容：深入理解CSS盒模型;

学习笔记：

BFC的原理

1. 内部的box会在垂直方向，一个接一个的放置

2. 每个元素的margin box的左边，与包含块border box的左边相接触（对于从做往右的格式化，否则相反）

3. box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠

4. bfc的区域不会与浮动区域的box重叠

5. bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的

6. 计算bfc高度的时候，浮动元素也会参与计算

 怎么取创建bfc

1. 根元素或其它包含它的元素

2. 浮动 (元素的 float 不是 none,浮动元素会生成一个块级框)

3. 绝对定位的元素 (元素具有 position 为 absolute 或 fixed)

4. 非块级元素具有 display: inline-block，table-cell, table-caption, flex, inline-flex

5. 块级元素具有overflow ，且值不是 visible

应用场景

1. 自适应两栏布局

通过 CSS 实现一个左边固定宽度、右边自适应的两列布局有3种方案。

（1）float

   浮动规则：

　　a. 浮动元素会被推到他的容器的边缘。

　　b. 任何浮动元素都会出现在他之前的浮动元素的旁边或是下方。如果元素都是左浮动，那么第二个元素将会出现在第一个元素的右边，如果都是右浮动，第二个元素会出现在第一个元素的左边。

　　c. 左浮动的盒子不能出现在右浮动盒子的右边。

　　d. 浮动元素不能高过他的容器的上边缘（当涉及到塌陷的边距这将会更复杂，请参考最初的规则）。

　　e. 浮动元素不能比前一个块级元素或浮动元素高。

　　f. 浮动元素不能高过前一行内联元素。

　　g. 靠着另一个浮动元素的浮动元素不能超出自己的父容器边缘。

　　h. 一个浮动的盒子必须尽可能的高的放置。

　　i. 一个左浮动的盒子必须尽可能左的放置，一个右浮动的盒子要尽可能的右的放置。尽可能高的位置的优先级比左右高，垂直定位规则比水平的左右规则在将元素推到边缘时优先级更高。

   leftBox左浮动，rightBox设置margin-left 即可。（不需要设置width 100%）

    

<style type="text/css"> 
            h1{
                margin: 0;         
            } 
            .wrap{
            width:100%;
            background: rgb(126, 165, 197);
            margin: 0;
            padding:  0;
            height: 600px;
            }
            .side {
            float: left;
            width: 200px;
            background: rgb(219, 110, 110);
            height: 300px;
            padding: 10px 10px;
            }
            .main {
            background: rgb(24, 179, 106);
            height: 500px;
            margin-left: 220px; /* side的宽度200px + 左右padding各10px */
            padding: 10px 10px;
            }
 </style>  

 <div class="wrap">
         <div class="side">
         <h1>side</h1>
         </div>
         <div class="main">
         <h1>main</h1>
         </div>
 </div>　

   

（2）position  

<style type="text/css">  
            *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            }
            .row {
            position: relative;
            width: 100%;
            background-color: rgb(142, 175, 206);
            }
            .side {
            position: absolute;/*脱离文档流，让右侧能顶上来*/
            top: 0;
            left: 0;
            width: 300px;
            height: 500px;
            background: rgb(219, 110, 110);
            }
            .main {
            width: 100%;
            height: 500px;
            background: rgb(24, 179, 106);
            padding-left: 300px;/*左侧的宽度*/
            }
        </style>  

<div class="row">
      <div class="side">
      <h1>side</h1>
      </div>
      <div class="main">
      <h1>main</h1>
      </div>　　
</div> 

（3）BFC

    leftBox左浮动，rightBox不用设置margin或padding，只需 overflow: hidden;

    初始设置leftBox左浮动以后的效果。（因为现在两个box都处在同一个BFC中，根据BFC规则2，每个元素的margin box的左边， 与包含块border box的左边相接触，即使存在浮动也是如此，所以他们都是以BFC边界为起点。）

   

    给右边的rightBox加上overflow: hidden。根据BFC规则4：BFC的区域不会与float box重叠。当右边变为一个新的BFC时，这两个块就不会重叠了，由此实现自适应。

    

    

<style type="text/css"> 
            div{
            height: 500px;
            }
            .wrap{
            width:100%;
            overflow: hidden;
            background: rgb(126, 165, 197);
            margin: 0;
            }
            .side {
            float: left;
            width: 200px;
            background: rgb(219, 110, 110);
            }
            .main {
            background: rgb(24, 179, 106);
            overflow: hidden;
            }
 </style>  

<div class="wrap">
            <div class="side">
            <h1>side</h1>
            </div>
            <div class="main">
            <h1>main</h1>
            </div>
</div>   

 

2. 清除内部浮动 :浮动及清除浮动的4种方式

float坍塌：（父容器高度坍塌，背景或边框不能正确显示）

解决方法：clear与BFC

a) 父元素内部末尾增加一个额外标签，如 空div，clear:both
b) 对父容器设置 overflow: hidden/auto，触发其BFC
缺点：设置hidden会导致超出部分直接被隐藏，，而设置auto的话超出部分会生成一个滚动条，影响视觉效果。
c) 使用伪类元素，再 用伪类元素清除浮动，类似方法1 .father:after{content:'';clear:both;display:block/table;}
此法要注意的是，必须是after伪元素，且该伪类元素必须为block元素，原因是after伪元素在其父容器的其他标签的最后添加一个元素，渲染顺序排在了其父容器内部的最后，然后设置block元素是为了不让其它元素与其一排，再对其设置清除浮动，父容器自然就被这个after伪元素撑开了高度。

after伪类清除浮动：

<style type="text/css">
.clearfix:after{
content:"";
display:block;
visibility:hidden;
clear:both;
height:0;
}
.clearfix{ /* 为了照顾ie6浏览器*/
zoom:1; 
/*通常，当浮动子元素导致父元素塌陷的时候，只要给父元素加上overflow: hidden;来解决，但是对于IE不行，需要zoom：1触发其hasLayout属性才可以*/
}
.box{width:400px;}
.one,.two{width:200px; height:100px; background-color:#093; float:left;}
.two{background-color:#39F;}
.test{width:400px; height:120px; background-color:#900;}
 
</style>

<body>
<div class="box clearfix">
　　<div class="one"></div>
　　<div class="two"></div>
</div>
<div class="test"></div>
</body>

before/after伪类清除浮动：（常用）

.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{ /*照顾ie6*/
zoom:1;
}

3. 防止垂直margin重叠

<style>
        *{
            margin:0;
            padding:0;
        }
        .top{
            background: #0ff;
            height:100px;
            margin-bottom:30px;
        }
        .bottom{
            height:100px;
            margin-top:50px;
            background: #ddd;
        }
    </style>

<section class="top">
        <h1>上</h1>
        margin-bottom:30px;
    </section>
    <section class="bottom">
        <h1>下</h1>
        margin-top:50px;
    </section>

效果：（边距重叠）

 

用bfc可以处理垂直margin重叠的关键代码：

<section class="top">
        <h1>上</h1>
        margin-bottom:30px;
    </section>

    <!-- 给下面这个块添加一个父元素，在父元素上创建bfc -->
    <div style="overflow:hidden">
        <section class="bottom">
            <h1>下</h1>
            margin-top:50px;
        </section>
    </div>

 处理后的效果：