CSS BFC特性(块级格式化上下文)
1、元素的BFC特性
BFC全称为”Block Formartting Context”,中文为”块级格式化上下文”。它是页面中的一块独立的渲染环境,并且有一套渲染规则,
它决定了其子元素将如何定位,以及它和其他兄弟元素的关系和相互作用。
BFC布局规则:
1)bfc内部的元素会在垂直方向,一个接一个地放置 2)盒子垂直方向的距离有margin决定,属于同一个bfc的两个相邻元素的margin会发生重叠 3)每个盒子的左外边缘(margin-left)会与其父元素的左边缘(border-left)相接触 4)bfc的区域会通过变窄来自适应而不会与float元素重叠在一起 5)bfc的高度计算时,浮动元素也参与计算。即创建了新的bfc的元素的高度会把内部浮动元素的高度也算进去 6)bfc是页面上一个隔离的独立容器,容器内的子元素不会影响到外面的元素;同理容器内的子元素也不会影响到父元素外面的 其他元素。
创建BFC的条件:
a)html元素 b)float的值不为none c)overflow的值为auto、hidden或scroll d)display的值为table-cell、inline-block、table-caption、flex、inline-flex e)position的值不为relative和static
2、BFC作用----理解BFC(个人理解)
1、因为bfc内部的元素与外部的元素绝对不会互相影响,因此当bfc元素的兄弟元素有浮动时,它不应该影响bfc内部元素的布局, 所以bfc会通过变窄来自适应,而不会与浮动元素发生重叠; 2、同样的,当bfc内部有浮动时,为了不影响外部元素的布局,bfc计算高度时会把浮动元素的高度也计算进去。 利用bfc避免margin重叠也是同样的道理。
3、BFC应用之:利用bfc特性实现左侧不固定,右侧也不固定的布局
图片来自:张鑫旭--粉丝群第1期CSS小测点评与答疑
如图:这种布局在移动端一般比较常见,左侧文字宽度不固定,右测文字宽度不固定,文字断行后也要保持同样的行距。在移动端中可以使用flex布局,grid布局,如果不使用css3布局,我们能否实现呢?答案是可以的,可以使用 浮动+bfc
特性!
<style> body,dl,dd,dt,p{ padding: 0;margin: 0; } dl{ width: 30%; padding: 10px; border: 1px solid #ccc; margin: 10px auto; } dt{ float: left; margin-right: 25px; } dd{ margin-bottom: 10px; word-break: break-all; text-align: left; /* 为dd元素创建一个bfc,根据bfc布局规则第4条,bfc的区域会通过变窄来自适应而不会与float元素重叠在一起, 所有这就达到了我们想要的效果。 */ overflow: hidden; } </style> <dl class="dl2"> <dt>手机系统</dt> <dd>Android</dd> <dt>登录方式</dt> <dd>QQ互联登录</dd> <dt>绑定事件</dt> <dd>2019-01-02 00:01</dd> <dt>其他</dt> <dd>FAsfsdafsadfasdfSDsadfsadfsd4545454555454545sdafsdf</dd> <dt>备注</dt> <dd>如果需要修改绑定,请联系HR进行修改!</dd> </dl>
下图是dd创建了bfc与未创建bfc的对比:
由图片可以看出,创建了bfc的dd的宽度自适应的变窄了,而未创建bfc的dd却与浮动的dt重合了。
4、BFC应用之:利用bfc特性解决margin塌陷问题
margin塌陷是一般指在标准文档流中,两个垂直排列的元素,一设置个margin-bottom,另一个设置margin-top,此时两个元素的margin就会发生重叠。
margin重叠规则:
1)margin的值都为正数时,取它们之间较大的值 2)margin的值都为负数时,取两个margin绝对值中较大的值 3)两个margin一正一负时,取两个margin相加的和
margin塌陷与不塌陷效果:
<style> body,dl,dd,dt,p{ padding: 0;margin: 0; } .float-container{ width: 30%; margin: 50px auto; padding: 10px; border: 1px solid #ccc; overflow: hidden; } .float-box{ /* 元素浮动后就创建了bfc,两个元素就创建了两个bfc,根据BFC布局规则第5条,.float-container的高度会把浮动元素的高度也计 算进去;根据BFC布局规则第2条,两个.float-box分别创建了2个bfc,因此它们之间的margin并不会重叠 */ float: left; width: 100%; height: 60px; margin: 20px 0; color: #fff; } .float-box:nth-child(1){background-color: #ccc;} .float-box:nth-child(2){background-color: #f10;} .no-bfc-container{ width: 30%; margin: 50px auto; padding: 10px; border: 1px solid #ccc; } .no-bfc-box{ height: 60px; margin: 20px 0; color: #fff; } .no-bfc-box:nth-child(1){background-color: #ccc;} .no-bfc-box:nth-child(2){background-color: #f10;} .bfc-box{ /* 根据BFC布局规则第2条,.bfc-box创建了一个bfc,与第一个.no-bfc-boxbu元素不属于同一个bfc,因此两个.no-bfc-box元素的 margin也不会发生重叠 */ overflow: hidden; } </style> <body> <div class="float-container"> margin未塌陷 <div class="float-box">margin: 20px 0;</div> <div class="float-box">margin: 20px 0;</div> </div> <div class="no-bfc-container"> margin塌陷 <div class="no-bfc-box">margin: 20px 0;</div> <div class="bfc-box"> <div class="no-bfc-box">margin: 20px 0;</div> </div> </div> </body>
6、参考文章
1、https://www.zhangxinxu.com/wo... (引导文章)
2、https://www.zhangxinxu.com/wo...
3、https://www.w3cplus.com/css/u...
4、https://blog.csdn.net/w362427...
5、https://blog.csdn.net/shadow_...
相关推荐
jianqi 2019-11-19
dazhifu 2020-04-16
CaiKanXP 2020-01-14
impress 2019-12-13
尚衍亮 2019-11-19
huakaiwuxing 2019-11-19
csscode 2019-07-01
nemunemu 2019-07-01
懵懂听风雨 2019-07-01
lanzhusiyu 2019-07-01
jianqi 2019-07-01
NARUTOLUOLUO 2019-06-30
尚衍亮 2019-06-30
juzhengqian0 2019-06-30
葉無聞 2019-06-29
dazhifu 2019-06-29
aSuncat 2019-06-29
juzhengqian0 2019-06-29