文档流与BFC感悟

字数统计: 362字   |   阅读时长: 1分钟

背景

 欢迎来到CSS和HTML交汇的世界！BFC是CSS和HTML相互影响的概念，HTML世界中的各个元素各有特性，这一点如同我们现实生活中一样，HTML中的各个元素在应用中展现了不同的个性，然而都要遵守共同的法则，让我们一起来了解其中普遍的BFC法则吧…

文档流

normal flow 正常文档流
position: absolute/fix/relative; z-index; float形成脱离文档流

  1. 文档流包括正常文档流，脱离文档流。
  2. 浮动元素具有破坏性，包裹性及浮动性。会造成父元素高度塌陷，但可以形成文字环绕的效果，应合理应用float元素。
  3. 元素浮动后，块级元素将忽略他的存在，BFC将重新感知它的存在。
  4. block级元素具有流体性质，会自动填满父级元素，可利用该性质，在布局上形成自适应宽度的效果。

BFC

Block Format Context 块级元素格式上下文

  1. 简单来说，块级元素形成BFC后，会在内部形成一个独立渲染区域，不管外部元素如何进行渲染，BFC总是“泰山崩于前而不改其色”。
  2. 在浮动图片与块级元素（文字）同一布局时，文字形成环绕，可将块级文字用overflow:hidden;形成BFC独立渲染区域，文字将不再环绕图片。

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

内圣外王，持勤以恒。凡人一枚，拙文见笑了~