分类

商品

商品

店铺

资讯

热门搜索 : WordPress 织梦企业官网小说源码 Discuz

服务器低至9.9￥/月

当前位置：首页 > 资讯 > 系统环境 > 服务器应用

css中的BFC布局总结

时间：2020-04-24 17:00 作者：jaimor 来源：阅读：613
扫一扫，手机访问

摘要：什么是BFCBFC意为Block Formatting Context，是一个独立的盒子，对外界不会有影响，当然外界也不会对盒子内部产生影响。BFC能够处理的问题处理margin穿透的问题处理margin重叠问题处理div塌陷问题（float父元素高度撑不开的问题）形成BFC的条件浮动元素，floa

什么是BFC

BFC意为Block Formatting Context，是一个独立的盒子，对外界不会有影响，当然外界也不会对盒子内部产生影响。

BFC能够处理的问题

处理margin穿透的问题
处理margin重叠问题
处理div塌陷问题（float父元素高度撑不开的问题）

形成BFC的条件

浮动元素，float 除 none 以外的值；
定位元素，position为（absolute或者fixed）；
display 为以下其中之一的值 inline-block，table-cell，table-caption；
overflow 除了 visible 以外的值（hidden, auto, scroll）

BFC的布局规则特性

内部的Box会在垂直方向上一个接一个的放置。
垂直方向上的距离由margin决定
bfc的区域不会与float的元素区域重叠。
计算bfc的高度时，浮动元素也参加计算
bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
每个元素的左外边距与包含块的左边界/上边界相接触(从左往右，否则相反)，即便存在浮动也是如此，BFC中的子元素不会超出它的包含块

全部评论(0)

上一篇：致敬尤雨溪，Vue.js 让我赚到了第一桶金
下一篇：ios设计模式之简单工厂模式

最新发布的资讯信息
【系统环境|】VMWare 16上的win7（32位）安装VMWare Tools的问题近期，在VMWare上使用win7虚拟机的时候，发现“安装vmware tools”的选项一直是灰色，无法安装。解决办...(2025-10-24 23:31)
【系统环境|】615，web前端开发(面试点：HTML、 CSS、 JavaScript三者的关系？HTML —— 结构，决定网页的结构和内容（ “是什么”） CSS —— 表现（样式），设...(2025-10-24 23:30)
【系统环境|】从”房间怪兽”到 ”口袋神器”:电脑进化史大起底，中国如何逆袭？(2025-10-24 23:17)
【系统环境|】打印机驱动安装教程：避坑要点与详细安装步骤分享(2025-10-24 20:56)
【系统环境|】如何安装佳博打印机驱动？手把手教你安装步骤(2025-10-24 20:55)
【系统环境|】爱普生打印机驱动安装教程，一步步教你完成安装(2025-10-24 20:54)
【系统环境|】【并发进阶】Future掌控未来之Callable跨线程返回结果和抛出异常的原理分析(2025-10-24 20:53)
【系统环境|】关于并发编程，你必须要知道的Future机制！(2025-10-24 20:52)
【系统环境|】Netty源码_Future和Promise详解(2025-10-24 20:51)
【系统环境|】阿里Java大神教你java快速过滤关键词(2025-10-24 20:50)

云上智慧

店铺

血鸟云

推荐商品

手机访问领取大礼包