做国际网站每年要多少钱,山东省建设工程 评估中心网站,深圳最好的外贸seo培训,大丰做网站哪家好①什么是BFC
BFC 全称#xff1a;Block Formatting Context#xff0c; 名为 “块级格式化上下文”。
W3C官方解释为#xff1a;BFC它决定了元素如何对其内容进行定位#xff0c;以及与其它元素的关系和相互作用#xff0c;当涉及到可视化布局时#xff0c;Block Forma…①什么是BFC
BFC 全称Block Formatting Context 名为 “块级格式化上下文”。
W3C官方解释为BFC它决定了元素如何对其内容进行定位以及与其它元素的关系和相互作用当涉及到可视化布局时Block Formatting Context提供了一个环境HTML在这个环境中按照一定的规则进行布局。
简单来说就是BFC是一个完全独立的空间布局环境让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢BFC可以看做是一个CSS元素属性 ②怎么触发BFC
1、根元素HTML元素 2、浮动floa 为 left 或 right 的时候 3、定位position 为 absolute绝对定位或fixed固定定位 4、溢出overflow 不为 visible时不对溢出部分做处理 5、修改元素类型display 为 inline-block、 flex,、inline-flex、grid、inline-grid、table-cell等等 具体例子
overflow: hiddendisplay: inline-blockposition: absoluteposition: fixeddisplay: table-celldisplay: flex ③BFC布局规则 内部的Box会在垂直方向一个接一个地放置。Box垂直方向的距离由margin决定。 属于同一个BFC的两个相邻Box的margin会发生重叠每个元素的margin box的左边 与包含块border box的左边相接触 ( 对于从左往右的格式化否则相反)。即使存在浮动也是如此。 BFC的区域不会与float box重叠,而是紧贴浮动元素。 BFC就是页面上的一个隔离的独立容器容器里面的子元素不会影响到外面的元素。反之也如此。 计算BFC的高度时浮动元素也参与计算
总结来说就是 BFC就是一个块级元素块级元素会在垂直方向一个接一个的排列BFC就是页面中的一个隔离的独立容器容器里的标签不会影响到外部标签垂直方向的距离由margin决定 属于同一个BFC的两个相邻的标签外边距会发生重叠计算BFC的高度时浮动元素也参与计算 ④BFC的应用场景 1清除盒子垂直方向上外边距合并垂直margin合并问题或者是margin塌陷问题 盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠。 解决方法 根据属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠的性质可以给其中一个盒子再包裹一个盒子父元素并触发其BFC功能例如添加overflow:hidden;这样垂直方向的两个盒子就不在同一个BFC中了因此也不会发生垂直外边距合并的问题了。 案例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {margin: 10px;width: 100px;height: 100px;background: #000;}/style
/head
bodydiv classcontainerdiv classbox/divdiv classbox/div/div
/body
/html效果 可以看到上面我们为两个盒子的margin外边距设置的是10px可结果显示两个盒子之间只有10px的距离这就导致了margin塌陷问题这时margin边距的结果为他们的最大值而不是他们的合为了解决此问题可以使用BFC规则为元素包裹一个盒子形成一个完全独立的空间做到里面元素不受外面布局影响或者简单粗暴方法一个设置margin一个设置padding。 修改代码 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleMargin边距重叠/titlestyle.box {margin: 10px;width: 100px;height: 100px;background: #000;}/style
/head
bodydiv classcontainerdiv classbox/divpdiv classbox/div/p/div
/body
/html效果 2在子元素设置成浮动元素的时候会产生父元素高度塌陷的问题。清除内部浮动 解决方法 给父元素设置overflow:hidden的时候会产生BFC 由于在计算BFC高度时自然也会检测浮动的子盒子高度。所以当子盒子有高度但是浮动的时候通过激发父盒子的BFC功能会产生清除浮动的效果。 案例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title高度塌陷/titlestyle.box {margin: 100px;width: 100px;height: 100px;background: red;float: left;}.container {background: #000;}/style
/head
bodydiv classcontainerdiv classbox/divdiv classbox/div/div
/body
/html效果图 可以看到上面效果给box设置完float结果脱离文档流使container高度没有被撑开从而背景颜色没有颜色出来解决此问题可以给container触发BFC上面我们所说到的触发BFC属性都可以设置。 修改代码 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title高度塌陷/titlestyle.box {margin: 100px;width: 100px;height: 100px;background: red;float: left;}.container {background: #000;display: inline-block;}/style
/head
bodydiv classcontainerdiv classbox/divdiv classbox/div/div
/body
/html效果 3两栏布局 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title两栏布局/titlestylediv {width: 200px;height: 100px;border: 1px solid red;}/style
/head
bodydiv stylefloat: left;两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局/divdiv stylewidth: 300px;我是蛙人如有帮助请点个赞叭如有帮助请点个赞叭如有帮助请点个赞叭如有帮助请点个赞叭如有帮助请点个赞叭如有帮助请点个赞叭/div
/body
/html效果 可以看到上面元素第二个div元素为300px宽度但是被第一个div元素设置Float脱离文档流给覆盖上去了解决此方法我们可以把第二个div元素设置为一个BFC。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title两栏布局/titlestylediv {width: 200px;height: 100px;border: 1px solid red;}/style
/head
bodydiv stylefloat: left;两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局/divdiv stylewidth: 300px;display:flex;我是蛙人如有帮助请点个赞叭如有帮助请点个赞叭如有帮助请点个赞叭如有帮助请点个赞叭如有帮助请点个赞叭如有帮助请点个赞叭/div
/body
/html效果 结语
谢谢你读完本篇文章希望对你能有所帮助如有问题欢迎各位指正。
参考
https://blog.csdn.net/weixin_45003732/article/details/127827289
https://blog.csdn.net/weixin_45003732/article/details/127827289
