zoukankan
html css js c++ java
BFC(块级格式化上下文)
BFC(块级格式化上下文):是一个独立的渲染区域,里面的内容浮动不影响区域外的元素
给元素添加以下属性可以触发BFC:
- float 属性不为none
- position 为 absolute 或 fixed
- display 为 inline-block,table-caption,fiex,inline-fiex
- overflow 不为visible
BFC布局规则特性(是一个独立的渲染区域,只有block-level box参与,规定了内部的block-level Box如何布局,并且与这个区域外部毫不相干):
- 在BFC中,盒子从顶端开始垂直地一个接一个地排列
- 盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻盒子的margin会发生重叠
- 在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)
对于从右到左的格式来说,则触碰到右边缘
- BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘
- 计算BFC的高度时,自然也会检测浮动的盒子高度
作用一:清除浮动
- float 属性不为none
- position 为 absolute 或 fixed
符合这两个属性就能触发BFC
作用二:解决外边距合并
属于同一个BFC的两个相邻盒子的margin会发生重叠,给son1一个margin-bottom: 50px
给son2一个margin-top: 100px ,他们两个的外边距会发生合并
<div class="son1"></div>
<div class="son2"></div>
这个时候用一个div包裹son1,创建不属于同一个BFC,就不会发生重叠了
<div class="over">
<div class="son1"></div>
</div>
<div class="son2"></div>
给over一个overflow: hidden 即可
案例
根据BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘
实现效果
是紧贴浮动的边缘,当左侧的盒子宽度变大,右边的盒子会自动变小,是因为 txt里面的overflow: hidden属性创建的BFC区域
BFC是一个隔离的独立区域,里面的元素不会影响到外面的元素
代码改变世界~
查看全文
相关阅读:
EasyPlayer RTSP Windows播放器D3D,GDI的几种渲染方式的选择区别
EasyPlayer RTSP Windows播放器D3D,GDI的几种渲染方式的选择区别
libEasyPlayer RTSP windows播放器SDK API接口设计说明
libEasyPlayer RTSP windows播放器SDK API接口设计说明
EasyPlayer windows RTSP播放器OCX插件使用说明
EasyPlayer windows RTSP播放器OCX插件使用说明
EasyDSS RTMP流媒体服务器是怎样炼成的:Easy而且更加互联网!
EasyDSS RTMP流媒体服务器是怎样炼成的:Easy而且更加互联网!
关于EasyRTSPClient、EasyPlayer RTSP流重连问题的解释
关于EasyRTSPClient、EasyPlayer RTSP流重连问题的解释
原文地址:https://www.cnblogs.com/hxiaoman/p/14876529.html
最新文章
懂得拒绝、尊重自己,尊重他人
Windows下msysGit安装
Session和Cache的区别
缓存依赖中cachedependency对象
EasyPlayerPro Windows播放器全屏模式下GDI显示出现黑屏问题解决
EasyPlayerPro Windows播放器全屏模式下GDI显示出现黑屏问题解决
EasyPlayerPro windows播放器本地配置文件配置方法介绍
EasyPlayerPro windows播放器本地配置文件配置方法介绍
EasyPlayerPro Windows播放器读取xml配置文件中的特殊字符问题
EasyPlayerPro Windows播放器读取xml配置文件中的特殊字符问题
热门文章
EasyPlayerPro Windows播放器本地快照抓拍截图功能实现方法
EasyPlayerPro Windows播放器本地快照抓拍截图功能实现方法
EasyPlayerPro Windows播放器实时流进行本地缓冲区即时回放功能实现
EasyPlayerPro Windows播放器实时流进行本地缓冲区即时回放功能实现
EasyPlayerPro Windows流媒体播放器(RTSP/RTMP/HTTP/HLS/File/TCP/RTP/UDP都能播)发布啦
EasyPlayerPro Windows流媒体播放器(RTSP/RTMP/HTTP/HLS/File/TCP/RTP/UDP都能播)发布啦
EasyPlayerPro Windows播放器电子放大/局部放大播放功能实现
EasyPlayerPro Windows播放器电子放大/局部放大播放功能实现
EasyNVR NVR网页无插件直播在兼容宇视NVR RTSP流媒体时PLAY过程对Scale的兼容
EasyNVR NVR网页无插件直播在兼容宇视NVR RTSP流媒体时PLAY过程对Scale的兼容
Copyright © 2011-2022 走看看