浮动和BFC的学习整理转述

2018-06-24 01:00:20来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!

 

文档流的概念:html中block块元素默认是单独占据一行的,从上到下排列,也就是我们说的文档流;

脱离文档流的概念:A元素定义了float属性之后,就会"浮"起来,原来占据的空间由后面的B元素占据;

如果浮动起来的A元素和B元素发生重叠,浮动起来的A元素就会覆盖B元素;

浮动元素具有内联元素的特性,不在单独占据一行,相邻的浮动元素,最前面的具有left属性值的排在最左边,最前面的具有right属性值的排在最右边;

当多个浮动元素一排容不下时,就换行;

 

浮动会带来各种布局问题,主要是父容器塌陷(子元素在父元素外面,影响后面的布局),也就有各种解决方案,利用clear属性清除浮动或者使父容器形成BFC;

1. 利用clear:both清除浮动

 在浮动元素后面在创建一个空的非浮动的div(inline元素不可以),并赋予属性clear:both;

 实际应用中我们更多采用:after伪元素加在父容器上来清除浮动,定义一个clearfix的class,然后给它添加一个:after伪元素,它会在父容器的内容最后面在添加一个看不见的块元素,我们给它定义clear:both;

/* 清除浮动 */
.clearfix:after {
      content: '';
      display: block;
      height: 0;
      clear: both;
      font-size: 0;
      visibility: hidden;
}
.clearfix {
    /*触发hasLayout,这又涉及到IE浏览器hack的知识*/
      zoom: 1;
}

 

2. 父容器形成BFC来解决父容器内部子元素浮动引起的塌陷问题

BFC元素特性就是不论内部怎样,都不会影响外部布局。

 如何触发BFC?

  • float值为left\right
  • overflow值为auto\scroll\hidden
  • display值为table-cell\table-captain\inline-block
  • position值为absolute或fixed

我们可以给父容器添加这些属性形成BFC,达到“清”浮动(包含浮动);

div设置float属性之后会产生inline-block特性,不会占据一整行了;

position:absolute会使父容器脱离文档流,虽然打成了目的,但父容器的位置问题又来了;

overflow:auto、scroll有时候会出现滚动条;

overflow:hidden需要确定不会出现溢出裁剪,很多企业不让用overflow,我们需灵活掌握;

 

最后,Nicolas Gallagher大师提供了一种更简便的方法,用的是display:table;

    .clearfix:before, /*:before处理margin上下重叠*/
    .clearfix:after {
        content: ""; 
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        zoom: 1;
    }

这里的:before,它是来处理margin上下重叠的;

 

3.margin重叠的问题

上下两个div,上面的赋予margin-bottom:20px,下面的赋予margin-top:10px,那么两个div之间的间距是多少呢?

两个div之间的间距是20px,因为发生了margin重叠,两个值那个大,间距就是哪个;

上面说的是上下两个div,那么一个div在另一个div中呢?情况也是一样的,会发生重叠,只是变成了top-top,bottom-bottom重叠;

两个相邻的元素,嵌套的元素,只要它们之间没有阻挡,就会发生margin重叠;

margin重叠解决方法:

上下两个div,这种情况一般不会用到,你看效果图的时候,一般都只会给其中一个div赋予margin的,都没有颜色,你也看不出来谁是谁,上面的列子我只是说有这个情况

内外嵌套的div,很多时候会用到,

  • 我们可以在它们之间加个阻碍,父元素或者子元素加个透明边框 border:1px solid transparent; 视情况可以具体到上边框还是下边框
  • 父元素或者子元素加个padding:1px;视情况可以具体到上padding还是下padding
  • 让父元素和子元素不在同一个BFC,视情况给它们哪个触发BFC;

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:使用C3的一些新属性绘制谷歌浏览器的图标

下一篇:前端页面隐藏元素