初识BFC

时间 2020-09-14

标签 bfc 繁體版

原文原文链接

　　在网页的排版布局中，都会用到float（浮动）来让网页的排版更加自由，突破块级元素独霸一行的特性。可是当咱们将这些块级元素进行浮动后，咱们会发现这些块级元素已经脱离了本来的文档流，css

跳出三界不在五行中了。这会给咱们带了不少没必要要的麻烦。这时候就须要用到BFC了。博主在刚接触BFC时也对其懵懵懂懂，但本着不懂不能装懂，不懂就要弄懂的原则，参考了网上这种大神对BFC的html

解释说明后，在这里分享下本身所理解的BFC，但愿对初学者们有些帮助。ide

　　那么什么是BFC？布局

　　首先，咱们须要知道BFC为Block Formatting Context缩写，中文解释为块级格式化上下文。spa

　　其次，咱们也须要明白BFC不是HTML/CSS里的一个标签元素属性这类，它是一个环境，是一个独立的渲染区域，它规定了内部的块级别的BOX如何布局，且BFC内和BFC外各不相干。code

　　最后，须要条件触发才能生成BFC环境。那么问题又来了，哪些元素会触发生成BFC呢？orm

　　　　1.根元素。htm

　　　　2.当Float属性不为none时。blog

　　　　3.position为absolute或fixed文档

　　　　4.overflow不为visible

　　看到这里，确定一大半人也还没能明白，那咱们先来看个示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .div1{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>
</html>

View Code

　　上面这段代码是很常见的，一个div里面嵌套两个div，显示结果就是两个div锤子排列。当咱们须要两个div水平排列时候，咱们经常会将div1和div2进行一个浮动。加入以下代码　　

　.div1,.div2{

　　　　　　　　float:left;
　　　　　　}

　　这时候两个div便会水平排列。可是这时候你会发现本来包含在一个div里面的两个div已是独自成块了，没有一个父级元素了，且浮动后的div还会影响到周围其余的布局。这时候

咱们就须要用到BFC环境了，咱们经常会利用overflow元素的hidden属性来触发BFC。

.div1,.div2{
             overflow:hidden;
           }

　　加入上述代码后，本来浮动后脱离文档流的两个div如今又重新回到 .father 的怀抱了。

　　利用overflow：hidden来触发BFC是博主经常用到的。

　　今天暂且分享这个经常会遇到的问题，其实BFC做用的地方也还挺多的，其余的待咱们下次再详谈。

　　若有对BFC了解更为全面的，欢迎给博主指正。