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代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持

来源：https://www.cnblogs.com/vicky24k/p/11545148.html

标签

bfc