【什么是BFC，BFC的作用，以及怎么触发BFC】的更多相关文章

盒模型 bug 与触发 bfc

 一.margin合并 css经典bug  两个块级元素 分别设置 margin-bottom 和 margin-top 并不能达到预期效果 <style> .up{ width: 200px; height: 50px; background: blue; margin-bottom: 50px; } .down{ width: 200px; height: 50px; background: pink; margin-top: 50px; } </style> </hea…

触发bfc解决父子元素嵌套垂直方向margin塌陷问题

首先看一下问题案例 .wrapper{             width: 100px;             height: 100px;             background-color: aqua;             margin-top: 100px;             margin-left: 100px;         }         .inner{             width: 50px;             height: 50px;  …

margin 塌陷bug 触发bfc

1.bfc block format context 2.如何触发一个盒子的bfc position:absolute; display: inline-block float:left/right; overflow:hidden; <html> <head> <link rel="stylesheet" href="cs2.css"> </head> <body> <div class="…

BFC概念和作用，触发条件

1.概念,全称是block format context,块级格式化上下文 2.触发条件 根元素 float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible 3.应用场景 自适应两栏布局 <style> body { width: 300px; position: relative; } .aside { wi…

那什么时候会触发BFC呢？块级格式化上下文

<html>根元素: float的值不为none: overflow的值为auto.scroll或hidden: display的值为table-cell.table-caption和inline-block中的任何一个: position的值不为relative和static. 换言之,只要元素符合上面任意一个条件,就无须使用clear:both属性去清除浮动的影响了.因此,不要见到一个<div>元素就加个类似.clearfix的类名,否则只能暴露你孱弱的CSS基本功.…

【转】浅析BFC及其作用

1. 什么是BFC BFC(block formatting context):简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用. 中文译为块级格式化上下文.是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. 在进行盒子元素布局的时候,BFC提供了一个环境,在这个环境中按照一定规则进行布局不会影响到其它环境中的布局.比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素…

清除浮动clear/BFC

浮动的清除有两种方式: 一.clear clear:both/left/right; 二.创建BFC (1)什么是BFC? BFC,块级格式化上下文,是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干.通俗的讲就是相当于一个把浮动的元素框起来并隔离的容器,容器里面的子元素不会影响到外面元素,使浮动不会溢出. (2)哪些元素会生成BFC? ①根元素或其它包含它的元素 ②float的值不为none ③ove…

学习BFC

BFC全称是Block Formatting Context,即块格式化上下文.它是CSS2.1规范定义的,关于CSS渲染定位的一个概念.要明白BFC到底是什么,首先来看看什么是视觉格式化模型. 视觉格式化模型 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制,它也是CSS中的一个概念. 视觉格式化模型定义了盒(Box)的生成,盒主要包括了块盒.行内盒.匿名盒(没有名字不能被选择器选中的盒)以及一些实验性的盒(未来可能添加到规范中).盒的…

BFC 从了解到放弃

最近工作中我突然产生了一个想法,就如我们人类面临的终极问题一般,我从哪里来?我到哪里去?在撸代码进行CSS布局的时候,我会去想,我为什么这么做?,为什么浮动的元素要用overflow?,为什么要用clearfix?,为什么边距会重叠?为什么absolute就不需要clearfix,为什么... 作业部落地址:https://www.zybuluo.com/shenguotao/note/625449 目录: 什么是BFC?及其作用! 如何产生BFC? BFC的应用 边距重叠 不与float bo…

BFC与边距重叠详解

1.什么是BFC? 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的.元素的类型和 display 属性,决定了这个 Box 的类型. 不同类型的 Box, 会参与不同的Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染.让我们看看有哪些盒子:block-level box:…