对BFC的一点认识

时间 2019-11-17

标签 bfc 一点 1点认识繁體版

原文原文链接

首先让我复习一下块级元素（block）和内联元素（inline）

块元素(block)的特色：html

block元素会独占一行，多个block元素会各自新起一行。默认状况下，block元素宽度自动填满其父元素宽度。
block元素能够设置width,height属性。块级元素即便设置了宽度,仍然是独占一行。
block元素能够设置margin和padding属性。

内联元素(inline)的特色： ide

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

BFC是什么？

那么什么是bfc呢，翻译一下叫Block Formatting Context，Block就是块级元素，Formatting Context是一个抽象的概念，它指的是页面中一个渲染区域，并拥有一套渲染规则，它决定了在区域中的子元素如何定位和其余元素的相互关系和做用，那么显然BFC的意思就是一个针对block元素的规则区域（越接触代码越以为本身是在创造世界，那么BFC就是一个为block元素创造的世界，这个世界有一套规则在规定它的行为）布局

BFC中的渲染规则？

block元素在垂直方向上一个个排列，每一个元素的左外边距与包含块的左边界相接触；（原来块级元素的特色是BFC赋予它的）
block元素垂直方向上的margin会重叠。（完整的说法是：属于同一个BFC的俩个相邻的块级元素的margin会发生重叠，与方向无关，可是由于block元素独占一行，它们的左右margin没有机会重叠。）
BFC区域不会与浮动元素重叠，计算BFC区域高度的时候会把浮动元素的高度计算在内（这是over-flow：hidden清除浮动的原理）
BFC做为一个独立的渲染区域，容器里面的元素不会影响外面，外面的元素也不会影响里面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    html * {
        margin: 0;
        padding: 0;
    }

    body{
        margin: 20px;
        border:1px solid
    }

    div {
        margin: 20px 0;
        height: 20px;
        background: red;
    }
</style>

<body>
    <div>我是block元素</div>
    <div>我是block元素</div>
    <div>我是block元素</div>
    <div>我是block元素</div>
</body>

</html>

View Code

让咱们举个栗子，一开始我没法理解我什么都没作，怎么页面就呈现了BFC规则下的状态，原来咱们的根元素html就是一个BFC区域，而body元素则做为包含块存在，如上就能够很清晰的看到div在垂直方向上一个个排列，而且左边界与包含块body的左边界相接触，它们之间的margin重叠，只有20px；ui

如今来验证一下html是否是一个BFC区域和规则的第三条，咱们将div设为float：left；spa

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    html * {
        margin: 0;
        padding: 0;
    }

    div {
        float: left;
        height: 20px;
        background: red;  
    }
</style>

<body>
    <div>我是float元素</div>
</body>

</html>

View Code

能够看出html的高度和浮动元素div的高度一致都是20px；而包含块body做为一个html-BFC中的普通block元素，高度为0；翻译

那么除了html根元素，咱们能够手动设置某一个元素为BFC么，答案是确定的code

建立BFC

float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption（display：table也认为能够生成BFC，其实这里的主要缘由在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-ccell生成了BFC）
position的值为absolute或fixed
fieldset元素

好，那我就顺便再来复习一下这些属性orm

float的值有left，right，none；因此一个元素只要浮动起来了，那就会建立BFC区域；这里要注意的是position:absolute和float会隐式的改变display类型，变为display:inline-block，能够设置长宽，默认宽度并不占满父元素，就算是显示的设置display:inline或display:block，也没有效果（由于下文display：inline-block也能够建立BFC，难道是由于float改变元素display后致使建立的BFC，此为推测）。
overflow的值有visible、hidden、scroll、auto；这个属性主要规定内容溢出元素框时发生的事情；这里注意的是咱们每每设置overflow：hidden来清除浮动，由于其余scroll和auto虽然也会建立BFC区域，可是会出现滚动条
display的值inline-block内联块状元素、table-cell表格单元格，相似<td><th>、table-caption表格标题,相似<caption>
position的值有absolute、relative、fixed、static；absolute绝对定位，相对于第一个定位的父元素定位；relative相对定位，相对与自身定位；并不脱离文档流；fixed相对于视口定位
fieldset元素，用的比较少，通常用来给表单画框

BFC的做用

网上举例的BFC做用好比清除浮动、消除margin重叠、布局等等我就很少赘述了，可是我总感受这只是利用BFC的特性作一些小事，杀鸡用牛刀，事实上BFC并无具体的做用，它是一套渲染的规则，而理解这些规则能够帮助咱们更好的使用CSS，对CSS有一种宏观的掌控，而解决具体的问题就交给具体的属性去作吧！　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　htm

参考文章

http://www.cnblogs.com/dojo-lzz/p/3999013.html#undefinedblog

https://www.jianshu.com/p/76484dff1cb5

http://www.360doc.com/content/16/0229/16/19812575_538294774.shtml

http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120133584314892/

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　“即使是凶残的野兽和恍惚的小鸟也不会落入相同的陷阱或罗网两次。”　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　——圣哲罗姆（古罗马学者）