1.什么是 BFC机制
BFC(Block Formatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
-
触发条件 (以下任意一条)
-
float的值不为none
-
overflow的值不为visible
-
display的值为table-cell、tabble-caption和inline-block之一
-
position的值不为static或则releative中的任何一个
在IE下, Layout,可通过
zoom:1触发
-
BFC布局与普通文档流布局区别:
BFC布局规则:
-
浮动的元素会被父级计算高度(父级元素触发了BFC)
-
非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
-
margin不会传递给父级(父级触发BFC)
-
属于同一个BFC的两个相邻元素上下margin会重叠
-
普通文档流布局: 浮动的元素是不会被父级计算高度
-
非浮动元素会覆盖浮动元素的位置
-
margin会传递给父级元素
-
两个相邻元素上下的margin会重叠
-
开发中的应用
-
阻止margin重叠
-
可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div都位于同一个 BFC 区域之中)
-
自适应两栏布局
-
可以阻止元素被浮动元素覆盖
BFC
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
让浮动内容和周围的内容等高
创建一个会包含这个浮动的BFC，通常的做法是设置父元素 overflow: auto 或者设置其他的非默认的 overflow: visible 的值。
外边距塌陷
创建新的BFC避免两个相邻div之间的外边距合并问题
使用display: flow-root
一个新的 display 属性的值，它可以创建无副作用的BFC。在父级块中使用 display: flow-root 可以创建新的BFC。
给div加display: flow-root 属性后，div中的所有内容都会参与BFC，浮动的内容不会从底部溢出。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 /**创建一个会包含这个浮动的BFC，通常的做法是设置父元素 overflow: auto 或者设置其他的非默认的 overflow: visible 的值。**/ 8 .box { 9 background-color: rgb(224, 206, 247); 10 border: 5px solid rebeccapurple; 11 overflow: auto; /*visible*/ 12 /*display: flow-root;*/ 13 } 14 .float { 15 float: left; 16 width: 200px; 17 height: 150px; 18 background-color: white; 19 border:1px solid black; 20 padding: 10px; 21 } 22 /** 23 * 创建新的BFC避免两个相邻 <div>之间的外边距合并问题 24 */ 25 .blue, .red-inner { 26 height: 50px; 27 margin: 10px 0; 28 } 29 30 .blue { 31 background: blue; 32 } 33 34 .red-outer { 35 overflow: hidden;/*visible*/ 36 background: red; 37 } 38 </style> 39 </head> 40 <body> 41 <div class="box"> 42 <div class="float">I am a floated box!</div> 43 <p>I am content inside the container.</p> 44 </div> 45 46 <div class="blue"></div> 47 <div class="red-outer"> 48 <div class="red-inner">red inner</div> 49 </div> 50 </body> 51 </html>
清浮动
1.父级div定义 overflow:hidden
优点：简单、代码少、浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。（不建议使用此种方式，可能会影响页面元素布局）
2.父级div定义伪类:after
1 clearfix{ 2 zoom: 1; //IE专有属性 3 } 4 clearfix:after{ 5 content: " "; 6 display: block; 7 clear: both; 8 visibility: hidden; 9 height: 0; 10 }
优点：浏览器支持好、不容易出现怪问题，写法是固定的，不理解也可以直接复制使用；
缺点：css代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持