专栏首页Nian糕的私人厨房CSS 块级化上下文 BFC

CSS 块级化上下文 BFC

Unsplash.jpg

概念 BFC(块级化上下文) 是一个独立渲染的区域,处于 BFC 内部的元素与外部的元素互相隔离,使内外元素的定位不会互相影响

创建 BFC 方式

  • 根元素
  • float 属性不为 none
  • position 属性为 absolutefixed
  • display 属性为下列之一 table-cell, table-caption, inline-block, flex, inline-flex
  • overflow 属性不为 visible (默认为 visible,需修改为 hidden, scroll, auto)

规则

  • 内部的 box 会在垂直方向,一个接一个地放置
  • BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此
  • BFC 不会与浮动元素重叠 => 利用 BFC 阻止文本换行
img { float: left; }
.content { overflow: hidden; }

<img src="Unsplash.jpg">
<div class="content">Lorem ipsum dolor sit, amet consectet...</div>

运行结果

  • 每个元素的 margin box 的左边, 与包含块 border box 的左边相接触,即使存在浮动也是如此
img { float: left; }
.content { overflow: hidden; margin-left: 210px; }

<img src="Unsplash.jpg">
<div class="content">Lorem ipsum dolor sit, amet consectet...</div>

运行结果

  • box 垂直方向的距离由 margin 决定,属于同一个 BFC 的两个相邻 box 的 margin 会发生重叠 => 利用 BFC 消除 Margin Collapse
img {
  float: left;
}
.content {
  overflow: hidden;
}
.top {
  margin-bottom: 10px;
}
.bottom {
  margin-top: 20px;
}

<img src="Unsplash.jpg">
<div class="content">
  <div class="top">1. Lorem ipsum dolor sit...</div>
  <div class="bottom">2. Lorem ipsum dolor sit...</div>
</div>

运行结果

  • 计算BFC的高度时,浮动元素也参与计算 => 利用 BFC 容纳浮动元素
img {
  float: left;
}
.content {
  overflow: hidden;
}
.top, .bottom {
  float: left;
}

<img src="Unsplash.jpg">
<div class="content">
  <div class="top">1. Lorem ipsum dolor sit...</div>
  <div class="bottom">2. Lorem ipsum dolor sit...</div>
</div>

运行结果

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS 布局_3 Position元素定位

    我们之前已经介绍过行元素,块元素及行内块元素的属性了,能够知道它们是具有自己默认的显示方式的,即元素会按照文档流 (document flow) 的方式,自上而...

    Nian糕
  • React 基础知识

    在正式讲解 React 之前,我们需要对 WebPack 部分做一个简单的介绍,而 WebPack 0 基础的同学,可以先参考 WebPack 模块化打包工具(...

    Nian糕
  • CSS banner图响应式居中显示

    在 PC 网站首页,banner 图作为网页中最大的一张图片,在传达网页的的主要信息的同时,也吸引着浏览者的所有注意力,所以 banner 图的展示方式直接影响...

    Nian糕
  • 移动端下拉筛选

    治电小白菜
  • Vue实践--指令

    1. v-text     v-text主要用来更新textContent,可以等同于JS的text属性。

    问天丶天问
  • 伪类,图片中出现文字·

    Wyc
  • web移动端左滑显示操作按钮

    治电小白菜
  • 基于Scrapy框架爬取厦门房价

    本文的运行环境是Win10,IDE是Pycharm,Python版本是3.6。 请先保证自己安装好Pycharm和Scrapy。

    潇洒坤
  • 一个汉字占几个字节你真的记住了吗?

    一个汉字占几个字节是不是不太好记呢,编码不一样则占字节位就不一样。下面用一段简短的代码了解一下一个汉字占几个字节。

    Java旅途
  • table锁定列的一个方法.及琢磨思路

    这是从http://stackoverflow.com找到一个一链接,删除多余的css,加上色就是上图。

    申君健

扫码关注云+社区

领取腾讯云代金券