当前位置：首页 > Web前端 > HTML

BFC和IFC在CSS中的用法

时间：2023-04-02 14:57:59 HTML

1.BFCBlockFormattingContexts（BFC，块级格式化上下文）是一个块级元素的渲染和显示规则。（BFC可以理解为一个封闭的大盒子，容器里面的子元素不会影响外面的元素）。1、BFC布局规则如下：①．内部盒子将在垂直方向上一个接一个地放置。②.框的垂直距离由边距决定，属于同一个BFC的两个相邻框的上下边距会重叠。③.每个元素的左侧触及包含框的左侧，即使存在浮动也是如此。④.BFC的区域不会和float重叠。⑤.BFC在页面上是一个隔离独立的容器，容器内的子元素不会影响外面的元素。反之亦然。⑥.BFC计算高度时，浮动元素也参与计算。2、介绍完BFC的布局规范，我们再来说说哪些元素会触发BFC。只要元素满足以下任一条件，即可触发BFC特性①。根元素。②.float的属性不是没有。③.position是绝对的或固定的。④.display是inline-block；表格单元格；表格标题；柔性。⑤.overflow不可见。3、接下来说说BFC①的作用和原理。解决重叠边距问题②解决浮动高度塌陷问题③解决浮动元素侵占问题首先来看自适应两栏布局。我们先定义两个div：

4。然后定义css:div{width:300px;}.aside{width:100px;高度：150px；向左飘浮;背景：黑色；}.main{高度：200px；background-color:red;}效果图如下：这恰好满足了规范的第三条规则：每个元素的左侧触及包含框的左侧。即使存在浮动也是如此。因此，假设我们需要将黑色区域推到红色区域的左侧。需要用到规范第四条：BFC的区域不会和float重叠。也就是说，我们需要创建BFC区。我们通过将红色区域的溢出设置为隐藏来触发BFC：高度：200px；background-color:red;}效果如下：5、接下来我们看清除内部浮动**首先是父div设置div**

6，然后css:.child{border:1pxsolidred;宽度：100px；高度：100px；float:left;}.parent{border:1pxsolidblack;width:300px;}效果如下：可以看到父div根本没有被拉伸。让我们回忆一下BFC规范中的第六条：在计算BFC的高度时，浮动元素也参与了计算。所以我们需要将父div触发为BFC，即设置其溢出为隐藏：.parent{border:1pxsolidblack;宽度：300px；overflow:hidden;}效果如下：可以看到父div已经打开了。7、再说下marginoverlap。首先定义两个垂直div：然后定义margin:.p{width:200px;高度：50px；保证金：50px0；background-color:red;}可以看到margin重叠的效果：再看BFC规范的第二条：框的垂直距离由margin决定，属于相邻两个的上下边使用BFC的框的边距重叠。意思是都属于同一个BFC，所以我们需要两个div不属于同一个BFC。为第二个div包装一个父div。然后将它的overflow设置为hidden，激活一个BFC，让margin不再重叠。.wrap{overflow:hidden;}效果如下：2、IFCIFC（InlineFormattingContexts）直译为“内联格式化上下文”。IFC的线框（wireframe）的高度是根据线中包含的元素的最高实际高度计算的（不受垂直padding/margin的影响）水平居中：当一个块要在环境中水平居中时，设置为inline-block会在外层生成IFC，text-align可以使其水平居中。垂直居中：创建一个IFC，使用其中一个元素扩展父元素的高度，然后设置它的vertical-align:middle，其他内联元素就可以在这个父元素下垂直居中。BFC的布局规则如下：1、ifc中的元素会从左到右排成一行。2.一行上的所有元素会在区域内形成一个linebox。3.linewidth的height是containingbox的高度，height是linebox中最高元素的高度。4、浮动元素不会在linebox中，浮动元素会压缩linebox的宽度。5、当linebox的宽度容纳不下子元素时，子元素会显示在下一行，并生成一个新的linebox。6.text-align和vertical-align在linebox的元素内跟随。如果觉得我的文章还不错，请关注并收藏！也可以加我微信讨论前端问题。vx:rgz987

上一篇：把网址一键转成APP就够了吗？

下一篇：web前端学习路线是什么

BFC和IFC在CSS中的用法相关文章

最新推荐

猜你喜欢