BFC的作用以及原理介绍

BFC布局规则

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。

生成BFC的元素

1.根元素
2.float属性不为none
3.position为absolute或fixed
4.display为inline-block, table-cell, table-caption, flex, inline-flex
5.overflow不为visible

<template><div class="parent"><div class="child1">1</div><div class="child2">2</div><div class="child3">3</div></div>
</template><script>
export default {name: "HelloWorld",data() {return {};},methods: {},created() {},mounted() {}
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>.parent {width: 100%;height: 100%;background-color: red;overflow: hidden;
}.child1 {width: 100px;height: 50%;text-align: center;background-color: cadetblue;float: left;margin: 10px 20px;
}.child2 {width: 200px;height: 200px;text-align: center;margin: 10px;background-color: whitesmoke;/* display: inline-block; */overflow: hidden;
}.child3 {width: 200px;height: 200px;text-align: center;margin: 80px 10px;background-color: whitesmoke;/* display: inline-block; */overflow: hidden;
}
</style>

网上参考链接：https://www.jianshu.com/p/1f91e136b22d

转载于:https://www.cnblogs.com/jiaqi1719/p/11439550.html

BFC的作用以及原理介绍相关推荐

计算机累加器有加法器功能吗,累加器是什么_累加器的作用及原理介绍
累加器的概念在中央处理器中,累加器(accumulator)是一种寄存器,用来储存计算产生的中间结果.如果没有像累加器这样的寄存器,那么在每次计算(加法,乘法,移位等等)后就必须要把结果写回到内存, ...
MOS管的作用及原理介绍
MOS管的英文全称叫MOSFET(Metal Oxide Semiconductor Field Effect Transistor),即金属氧化物半导体型场效应管,属于场效应晶体管中的绝缘栅型.因此 ...
MOS管的作用及原理介绍+MOS管应用电路
MOS管工作原理的应用驱动电路详解 MOS管的英文全称叫MOSFET(Metal Oxide Semiconductor Field Effect Transistor),即金属氧化物半导体型场效应管 ...
【转】前端精选文摘：BFC 神奇背后的原理
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...
BFC 神奇背后的原理
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...
java语言的实现机制_JAVA语言之Java NIO的工作机制和实现原理介绍
本文主要向大家介绍了JAVA语言之Java NIO的工作机制和实现原理介绍,通过具体的内容向大家展示,希望对大家学习JAVA语言有所帮助. 前言本文只简单介绍NIO的原理实现和基本工作流程 I/O和 ...
JAVA基础加强（张孝祥）_类加载器、分析代理类的作用与原理及AOP概念、分析JVM动态生成的类、实现类似Spring的可配置的AOP框架...
1.类加载器 ·简要介绍什么是类加载器,和类加载器的作用 ·Java虚拟机中可以安装多个类加载器,系统默认三个主要类加载器,每个类负责加载特定位置的类:BootStrap,ExtClassLoader ...
Springboot中的缓存Cache和CacheManager原理介绍
一.背景理解什么是缓存,为什么要用缓存? 程序运行中,在内存保持一定时间不变的数据就是缓存.简单到写一个Map,里面放着一些key,value数据,就已经是个缓存了.所以缓存并不是什么高大上的技术, ...
LVS原理介绍及安装过程
一.ARP技术概念介绍为什么讲ARP技术,因为平常工作中有接触.还有就是LVS的dr模式是用到arp的技术和数据. 1.什么是ARP协议 ARP协议全程地址解析协议(AddressResolutio ...

BFC的作用以及原理介绍

BFC布局规则

生成BFC的元素

BFC的作用以及原理介绍相关推荐

最新文章

热门文章