Css Bfc Haslayout


原文链接: Css Bfc Haslayout

IE中也有与BFC类似概念的haslayout

  1. 为什么要使用BFC (BFC的应用场景)

    1.解决margin塌陷问题
    给子元素加一个父元素,并设置父元素为BFC
    (1)为父盒子设置border,为外层添加border后父子盒子就不是真正意义上的贴合。
    (2)[BFC方式] 为父盒子添加overflow:hidden;
    (3)为父盒子设定padding值。
    2.侵占浮动元素的位置
    设置非浮动元素为 BFC
    3.清除浮动
    设置父元素为BFC

  2. 如何触发一个盒子的BFC

    overflow:hidden
    float:left,right
    position:absolute
    display:inline/inline-block/flex
    

    根元素
    float的值不为none;
    overflow的值不为visible元素(可以为hidden,scroll,auto);
    display的值为inline-block,table-cell,table-caption,flex,inline-flex中的任何一个;
    position的值为absolute,fixed(不为static,relative中的任何一个);绝对定位元素
    display:table也认为可以生成BFC,其实这里的主要原因在于table会默认生成一个匿名的table-cell,正是这个匿名的table-cell生成了BFC。

float 浮动元素产生浮动流

浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素
浮动会导致父元素高度坍塌

  1. 脱离普通流,不占用空间,不能撑开父容器 (和 postion:absoulte 类似)
  2. 所有产生了浮动流的元素,块级元素看不到他们
  3. 触发了BFC后的元素,文本类元素(含有inline的元素) 都能看到浮动元素

如何清除浮动?
不要在浮动元素上清除浮动
给最后一个元素加上clear:both之后,最后一个元素的左右都没有挨着浮动元素,但是为什么高度还是坍塌了呢?机智的你可能发现了,由于最后一个元素是浮动元素,脱离了文档流,就算给第三个元素上下加了清除空间,也是没有任何意义的

清除浮动主要是两种方法,即使用clear属性 ,或者BFC清除浮动。
一句话,强烈推荐clearfix的方式清除浮动!
// 全浏览器通用的clearfix方案【推荐】
// 引入了zoom以支持IE6/7
// 同时加入:before以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}

 .clearfix:after{
     content: ".";
     display: block;
     height: 0;
     clear:both;
     visibility: hidden;
     }
.clearfix{ display: inline-block;} /* for IE/Mac */
清除浮动指什么?
浮动元素会脱离文档的普通流,而其父容器在普通流中,则存在父元素高度坍塌问题,如果我们希望浮动元素在其父容器内部浮动,则需要清除浮动,而浮动元素的能够浮动,是因为包围它的行框缩短了,从而给浮动元素留下了空间,浮动原理简述,而清除浮动就是让包围浮动元素的行框恢复原长度,但浮动元素客观存在(虽然不在普通文档流中),占据了一定空间,为了恢复原长度,行框应该向下或向上移动,直到左右没有浮动元素为止(即给浮动元素上面或下面添加了足够的清除空间),这样也就恢复了原长度。  

BFC清除浮动-解决子元素 float 后,父级元素塌陷

<style>
 .parent {
    overflow: hidden;        //方式1 为父级元素添加bfc
    border: 5px solid #fcc;
    width: 300px;
 }
                             //方式2 为父级伪元素添加bfc,不影响布局
 .parent::after {
     content:"";
     clear:both;
     display:block;
 }

.child {
    float: left;
    border: 5px solid #f66;
    width: 100px;
    height: 100px;   
}
</style>
<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

解决margin塌陷问题

给子元素加一个父元素,并设置父元素为BFC

防止垂直 margin 重叠--会更改框架结构,所有不要采用

属于同一个BFC的两个相邻Box的margin会发生重叠,我们可以在p外面包裹一层容器,并触发该容器生成一个BFC。那么两个P便不属于同一个BFC,就不会发生margin重叠了。
<style>
    .wrap {
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align: center;
        margin: 100px;
    }
</style>

<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>
`