20180426_BFC学习与了解 - Githubissues

openks / learn-vue

自定义组件文档

https://openks.github.io/learn-vue

0 stars 0 forks source link

20180426_BFC学习与了解 #104

Open openks opened 6 years ago

openks commented 6 years ago

BFC(Block formatting context) 块级格式化上下文

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

只要元素满足下面任一条件即可触发 BFC 特性：

body 根元素浮动元素：float 除 none 以外的值绝对定位元素：position (absolute、fixed) display 为 inline-block、table-cells、flex overflow 除了 visible 以外的值 (hidden、auto、scroll)

openks commented 6 years ago

同一个 BFC 下外边距会发生折叠

两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠详见demo

BFC 可以包含浮动的元素（清除浮动）

这个一直都知道，但是不知道是BFC特性

让容器变为BFC则容器将会包裹着浮动元素 demo

BFC 可以阻止元素被浮动元素覆盖

浮动元素会覆盖兄弟元素内容,让浮动元素不覆盖兄弟元素则只需让兄弟元素设置为BFC demo