前端CSS必知：BFC及其触发条件 |
您所在的位置：网站首页 › 卢克西属性触发条件 › 前端CSS必知：BFC及其触发条件 |
|
文章目录
1. bfc的理解（块级格式化上下文）
2. 触发bfc的方式
3. bfc解决的问题：外边距合并，检测浮动高度，制作右侧自适应盒子
4. bfc布局规则特性
5. 阻止文字环绕
6. 自适应两栏布局
7. 子元素浮动时，父元素高度塌陷的解决
将本人好久之前的
云笔记 搬到博客上来，统一维护。
1. bfc的理解（块级格式化上下文）
可以看作是隔离了的独立容器，内部元素的布局，不会影响外部元素。 可通过css属性触发。 浮动元素产生了浮动流，块级元素看不到(看不到的意思是不会被影响)； 文本类属性的元素（inline)，文本元素和产生了bfc的元素都能看到浮动元素。 2. 触发bfc的方式定位、浮动、overflow: hidden、display 的多种。 （1）position:absolute或fixed； （2）float:left/right; （3）overflow:hidden; 不为visible， 常用方式; （4）display:inline-block; flow-root, table-cell, table-caption, flex, inline-flex等。 3. bfc解决的问题：外边距合并，检测浮动高度，制作右侧自适应盒子垂直方向的距离由 margin 决定， 属于同一个 BFC 的两个相邻的外边距会重叠，如果想不重叠，就要设置独立的BFC。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |