BFC和清浮动问题

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布局规则:

    1. 浮动的元素会被父级计算高度(父级元素触发了BFC)

    2. 非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)

    3. margin不会传递给父级(父级触发BFC)

    4. 属于同一个BFC的两个相邻元素上下margin会重叠

    1. 普通文档流布局: 浮动的元素是不会被父级计算高度

    2. 非浮动元素会覆盖浮动元素的位置

    3. margin会传递给父级元素

    4. 两个相邻元素上下的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代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持

posted @ 2019-09-18 20:30  朵拉.科波菲尔  阅读(264)  评论(0)  编辑  收藏  举报