#yyds干货盘点# 【js学习笔记五十】BFC规范
source link: https://blog.51cto.com/u_14476028/5359525
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
#yyds干货盘点# 【js学习笔记五十】BFC规范
原创
我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷
// 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。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK