一、BFC是什么？ 官方定义 BFC（Block Formatting Context，块格式化上下文） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 详见 "MDN" 看不明白？那就对了！ 官方解释若不搞得抽象难懂些，怎能显出高大上？！（ ...
分类：
其他好文 时间：
2020-02-23 16:38:19
阅读次数：
99
第一种方案 BFC(Block Formatting Context) 块级格式化环境/布局环境 BFC是CSS中的一个隐含属性，开启BFC该元素会变成一个独立的布局区域 元素开启BFC的特点： 1.开启BFC元素不会被浮动元素覆盖 2.开启BFC元素子元素和父元素外边距不会重叠 3.开启BFC的元 ...
分类：
其他好文 时间：
2020-02-05 13:23:36
阅读次数：
65
文档流 文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。 浮动特性 浮动元素有左浮动(float:left)和右浮动(float:right)两种 浮动的元素会向左或向右浮动， ...
分类：
其他好文 时间：
2020-02-03 09:57:22
阅读次数：
71
浮动元素会影响后边的元素，但不会影响前边的元素 清除浮动： 方法一：在浮动元素后面添加一个空元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ ...
分类：
其他好文 时间：
2020-01-31 19:01:46
阅读次数：
99
浮动元素之间没有缝隙，这和行内块还是不一样的，有点区别的！ 2) 浮动元素与兄弟盒子之间的关系 注意：解决浮动的四种办法，后三种都是针对浮动元素的父元素的。 ...
分类：
Web程序 时间：
2020-01-22 18:34:02
阅读次数：
103
一、浮动——float float：left | right | none | inherit 1、特性 任何元素都可浮动，浮动后 生成块级框 （ BFC ）。 浮动元素会从 正常流中删除 其他元素会环绕浮动元素 margin不会合并 其包含块是最近的块级祖先元素 浮动元素之间不会重叠 空间不够，浮 ...
分类：
其他好文 时间：
2020-01-07 20:10:44
阅读次数：
97
什么是 BFC 在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-capti ...
分类：
Web程序 时间：
2019-12-13 23:54:28
阅读次数：
168
触发BFC body 根元素 浮动元素：float 除 none 以外的值 绝对定位元素：position (absolute、fixed) display 为 inline-block、table-cells、flex overflow 除了 visible 以外的值 (hidden、auto、s ...
分类：
其他好文 时间：
2019-12-09 21:37:53
阅读次数：
118
清除浮动的本质：标准流会撑开盒子，若浮动了，浮动元素不占有位置，父亲没有高度，底下盒子会跑上来。要做的就是闭合浮动。 方法 1.额外标签法 加空标签<div> <div style="clear: both;"></div> 2.父级添加overflow属性 overflow：hidden 3.使用 ...
分类：
Web程序 时间：
2019-12-09 19:45:39
阅读次数：
97
IE6常见CSS解析Bug及hack 2) 双倍浮向（双倍边距） 描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边界加倍显示。 hack:给浮动元素添加声明：display:inline。 3)当li里面有a和span两个标签，并给span设置了浮动 描述：在li里面的a或者span ...
分类：
Web程序 时间：
2019-12-02 22:01:16
阅读次数：
176
