前言


我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷


导语


BFC


#yyds干货盘点# 【js学习笔记五十】BFC规范_块级元素#yyds干货盘点# 【js学习笔记五十】BFC规范_块级元素_02

总结

// BFC 即块级格式上下文, 根据盒模型可知, 每个元素都被定义为一个矩形盒子, 然而盒子的布局会受到尺寸, 定位, 盒子的子元素或兄弟元素, 视口的尺寸等因素决定, 所以这里有一个浏览器计算的过程, 计算的规则就是由一个叫做视觉格式化模型的东西所定义的, BFC 就是来自这个概念, 它是 CSS 视觉渲染的一部分, 用于决定块级盒的布局及浮动相互影响范围的一个区域。
// BFC 具有一些特性:

// 块级元素会在垂直方向一个接一个的排列, 和文档流的排列方式一致。
// 在 BFC 中上下相邻的两个容器的 margin 会重叠, 创建新的 BFC 可以避免外边距重叠。
// 计算 BFC 的高度时, 需要计算浮动元素的高度。
// BFC 区域不会与浮动的容器发生重叠。
// BFC 是独立的容器, 容器内部元素不会影响外部元素。
// 每个元素的左 margin 值和容器的左 border 相接触。

// 利用这些特性, 我们可以解决以下问题:

// 利用 4 和 6, 我们可以实现三栏( 或两栏) 自适应布局。
// 利用 2, 我们可以避免 margin 重叠问题。
// 利用 3, 我们可以避免高度塌陷。

// 创建 BFC 的方式:

// 绝对定位元素( position 为 absolute 或 fixed)。
// 行内块元素, 即 display 为 inline - block。
// overflow 的值不为 visible。

#yyds干货盘点# 【js学习笔记五十】BFC规范_块元素_03