什么是 BFC 【 这个可略过不看 理论性的东西 是当笔记摆着的 】Block fomatting context (简称BFC)Inline formatting context (简称IFC)CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFCBFC 定义：BFC直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。BFC布局规则：1、内部的Box会在垂直方向，一个接一个地放置。2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠3、每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。4、BFC的区域不会与float box重叠。5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。6、计算BFC的高度时，浮动元素也参与计算这些元素会生成BFC:1、根元素2、float属性不为none3、position为absolute或fixed4、display为inline-block, table-cell, table-caption, flex, inline-flex5、overflow不为visible 以下内容： 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 慎用宽高 尽量不要加 容易出现 bug 及兼容问题清除浮动 在浮动的父级加/* css /.className::after{ content:’’; display: block; clear:both;}rem算法/ css /html { font-size: 62.5%; } / IE9以下兼容 /body { font-size: 14px; font-size: 1.4rem; } / =14px /h1 { font-size: 24px; font-size: 2.4rem; } / =24px /单行溢出变点点：/ css /.className{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}多行溢出变点点：/ css /.className{ overflow: hidden; display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示 。 text-overflow: ellipsis; // 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。 -webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式 。 -webkit-line-clamp: 2; // 限制在一个块元素显示的文本的行数。}文字两端对齐：/ css // 中文文字两端对齐 /.className1{ text-align:justify; text-justify:inter-ideograph}/ 英文文字两端对齐 /.className1{ text-align:justify; text-justify:newspaper}css中如何让第一个和最后一个不被选中?tr:not(:first-child):hover { background: #ffffdd; }/ 如果上面的代码出现问题，使用下面的会更安全 或者 :not(class) /.b:not(.b-n):hover { background: #ffffdd;}清除a的默认样式/ css /.className1{ text-decoration:none; out-line:none;}点击跳转页面/ html */<div onclick=“window.open(‘http://www.baidu.com’)">在新窗口跳转至百度</div><div onclick=“window.open(‘http://www.baidu.com’,’_self’)">在当前窗口跳转至百度</div>