bfc | 易学教程

关于BFC的一些事

阅读更多关于关于BFC的一些事

BFC的生成在实现CSS的布局时,假设我们不知道BFC的话,很多地方我们生成了BFC但是不知道.在布局中,一个元素是block元素还是inline元素是必须要知道的.而BFC就是用来格式化块状元素盒子,同样还有管理内连盒子的IFC等.那首先就来了解一下什么是FC. FC: Formatting Context指的是页面中的一个渲染区域,并且拥有自己的渲染规则.决定子元素如何定位,以及和其他元素的相互作用和联系. BFC: 块级格式化上下文, 是一个独立的块级渲染区域,只针对块级元素,有一套自己的渲染规则来约束块级盒子,与外部无关. 既然BFC是一块独立的渲染区域,那么这块区域在哪里,有多大, 这就有生成BDC的元素决定,CSS2.1中规定, 满足以下CSS声明的元素就会生成BFC. 根元素 float不为none overflow不为hidden display: inline-block, table-cell, table-caption (注意: 值为table会生成BFC是因为会默认生成一个匿名的table-cell,所以不是table生成了BFC) position: absolute, fixed BFC的约束浏览器对BFC约束如下: 1. 生成BFC的子元素会一个接一个的放置,在垂直方向上的起点是包含块的顶部,相邻的子元素之间的垂直距离由margin控制

两栏布局

阅读更多关于两栏布局

法一：左侧 float:left;右侧margin-left; html <div class="left">left</div> <div class="right">right</div> css body,div{padding: 0 ;margin:0;} .left,.right{height: 200px;} .left{float: left;width: 200px;} .right{margin-left: 200px; background-color: greenyellow;} //因为块级元素有流体特性，即默认会填充满外部容器，所以只需要设置margin，不需要设置width就可以让content填满剩余的部分。法二：左侧 float:left; 右侧overflow:hidden； html <div class="left">left</div> <div class="right">right</div> css body,div{padding: 0 ;margin:0;} .left,.right{height: 200px;} .left{float: left;width: 200px;} .right{overflow:hidden; background-color: greenyellow;} 右侧设置的 overflow

css之什么是bfc

阅读更多关于 css之什么是bfc

---【BFC是什么】：　　块级格式上下文，规定了内部盒子如何布局，并且与这个区域外部毫不相干 ---【BFC的规则】：　　1，在内部的BOX会在垂直方向，一个接一个地放置　　2，BFC的区域不会与float.box 重叠　　3，内部的BOX垂直方向的距离由margin决定，同一个BFC内相邻的BOX的magin会重叠　　4，计算BFC高度时，浮动元素也参与计算　　5，BFC就是页面上的一个隔离的独立容器，容器里子元素不会影响到容器外面的元素 ---【BFC的生成条件】：　　1，根元素　　2，float属性部位node 　　3，position 为absolute 或fixed 　　4,overflow 不为visible 　　5,display为inline-block / table-cell / table-caption / inline-flex 来源： https://www.cnblogs.com/zzhqdkf/p/12491652.html

BFC/添加省略号/圆角

阅读更多关于 BFC/添加省略号/圆角

1. 触发BFC的样式浮动元素：float 除 none 以外的值绝对定位元素：position (absolute、fixed) display 为 inline-block、table-cells、flex overflow 除了 visible 以外的值 (hidden、auto、scroll) 2. BFC解决的问题解决子元素带动父层级的问题解决margin叠加问题解决margin传递问题解决浮动问题解决覆盖问题 3. 添加省略号 width 必须有一个固定的宽 white-space : nowrap 不让内容折行 overflow : hidden 隐藏溢出的内容 text-overflow : ellipsis 添加省略号多行(了解)： display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 4. 圆角当宽高不一样的情况下？ border-radius : 100px | 50% 这是有区别的 border-radius: 20px; 四个角 border-radius: 20px 40px; 左上和右下右上和左下 border-radius: 20px 30px 40px 50px; 左上右上右下左下 (顺时针)

BFC与垂直外边距合并问题

阅读更多关于 BFC与垂直外边距合并问题

一、什么情况下发生外边距的合并　　1）必须处于普通文档流中(不能脱离文档流)，并且处于同一个BFC中　　2）相邻的外边距，不能有间隙和边框　　3）垂直方向上二、如何合并　　1）兄弟元素之间，外边距合并会去最大的那个外边距而不是取和　　　　　　2）父子元素之间，外边距合并会将子元素的外边距设置给父元素　　　　　　3）空元素　　　　三、如何解决垂直外边距重叠问题？　　1）父元素添加透明上边框或者内边距　　2）父元素前面块元素隔开　　　　　　3）开启BFC，　　　　*设置 display：table/table-cell/table-captions/inline-block 或者float不为none或者position:absoolute/fixed 后元素与父元素、子元素、相邻元素都不会发生重叠　　　　*设置overflow：hidden/auto 元素与其子元素不会发生重叠，但是相邻元素、父元素会发生外边距合并四、BFC问题 1、什么是BFC？　　formatting context 格式化上下文，即为一个独立的区域，内部有自己的一套渲染规则，规定了内部的元素的定位规则，以及与其他元素的关系和相互作用　　常见的formatting context有：BFC IFC GFC FFC BFC：block formatting context

CSS布局基础--BFC

阅读更多关于 CSS布局基础--BFC

1，什么是BFC 　　BFC（Block Formatting Context）块级格式化上下文，它就是一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其他环境中的布局。它是W3C CSS2.1规范中的一个概念，是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level box如何布局，并且这个区域与外部毫不想干， 2，生成BFC 　　下面的方法可以创建一个新的BFC 　　（1）浮动元素，float: left | right 　　（2）绝对定位元素，position: absolute | fixed 　　（3）块级元素以及块级容器（比如display: inline-block、table-cell、table-capation）　　（4）overflow值不为visible的块级盒子 3，BFC的主要应用　　（1）浮动元素的塌陷问题。BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。当一个元素中的子元素浮动了，这个父元素就会发生高度塌陷问题。如下代码所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BFC</title> <style> .content { width: 100

表单以及BFC知识点补充

阅读更多关于表单以及BFC知识点补充

表单控件补充 1、表单字段集语法：说明：相当于一个方框，在字段集中可以包含文本和其他元素，该元素用于对表单中的元素进行分组并在文档中区别标出文本，fieldest元素可以嵌套，在其内部可以在设置多个fieldest对象。disabled定义空间禁止可用。作用：给表单元素划分区域或者进行分组。特点：可以嵌套自己本身，也可以嵌套其他元素，自带边框。 2、字段集标题语法：说明：legend元素可以在fieldest对象绘制的边框内插入一个标题。legend元素必须是fieldest内唯一一个legend元素。 align=“left/center/right/justify”,水平对其属性，除了可以让内容改变对其方式同时元素也会改变对齐方式。 3、提示信息标签语法：<label for="绑定控件id名“> 说明：label元素用来定义标签，为页面上的其他元素指定提示信息，要将label元素绑定到其他的控件上，可以将label元素的for属性设置为该控件的id属性值相同。 BFC的布局规则 1、内部的box会在垂直方向，一个接一个的放置。 2、box垂直方向的距离由margin决定，属性同一个BFC的两个相邻box的margin会发生重叠。（按最大的margin值决定） 3、每个元素的margin box的左边，与包含块border box左边相接触。 4

我的前端学习笔记04—Float

阅读更多关于我的前端学习笔记04—Float

浮动的简介通过浮动可以使一个元素向其父元素的左侧或右侧移动使用 float 属性来设置于元素的浮动可选值： none 默认值，元素不浮动 left 元素向左浮动 right 元素向右浮动注意元素设置浮动以后，水平布局的等式便不需要强制成立元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置所以，元素下边的还在文档流中的元素会自动向上移动浮动的特点： 1、浮动元素会完全脱离文档流，不再占据文档流中的位置 2、设置浮动以后元素会向父元素的左侧或右侧移动， 3、浮动元素默认不会从父元素中移出 4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素 5、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移 6、浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高简单总结：浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局例： float : left ; 浮动的其他特点（1）浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果（2）元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化脱离文档流的特点：块元素： 1、块元素不在独占页面的一行 2、脱离文档流以后，块元素的宽度和高度默认都被内容撑开行内元素：

什么是BFC

阅读更多关于什么是BFC

BFC即 Block Formatting Contexts (块级格式化上下文)。是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。浮动元素会创建BFC，则浮动元素内部子元素主要受该浮动元素影响，所以两个浮动元素之间是互不影响的。布局规则： 1.内部的Box会在垂直方向，一个接一个地放置 2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 3.每个元素的margin-box的左边，与包含块border-box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 4.BFC的区域不会与float box重叠。来源： CSDN 作者： ORZ-Top 链接： https://blog.csdn.net/weixin_46391367/article/details/104598963

HTML里也有“KFC”？不，是“BFC”！

阅读更多关于 HTML里也有“KFC”？不，是“BFC”！

什么是“BFC”？对于HTML中新手小白的我，初次接触到“BFC”这个名词的时候，让我瞬间联想到了。。。。嘿嘿！。。不开玩笑了！言归正传，什么叫做“BFC”呢？如上图，我写的最普通的块状元素，在没有写任何其它的布局手法的情况下，它默认的就是上下排列的。那为什么要上下排列呢？而不是左右，或者在别的什么地方显示呢？其实它就是遵循了BFC的布局规则。没错，其实现在就很好理解什么是BFC了，它其实就是一种布局的规则，我们在布局的时候，都是基于BFC的布局规则来进行页面布局的！ “BFC”的布局规则！那BFC到底都有哪里规则呢？ 1.内部的box（块元素，以下简称“box”）会在垂直方向，一个接一个的放置！如上图： 2.box的垂直方向的距离由margin决定，属于同一个BFC的两个相邻的box的margin会发生重叠，同时是按照margin值大的一方显示。如：第一张图的margim-bottom是15px，第二张图的margim-top是25px，它们的margin值在同一BFC中是以margin值大的显示而不是相加显示。 3.每个元素的margin box的左边与包含块border box的左边接触。如图： 4.BFC的区域不会与float box重叠。上图是在包含块中正常显示的两个元素，上下排列。如果我给绿色元素加一个浮动，来看看有什么效果：绿色元素加了浮动之后

订阅 bfc