BFC、浮动——8.5-CSDN博客

本文链接：https://blog.csdn.net/from_shanghai/article/details/98482577

BFC:

块级格式化上下文

BFC特性的元素可看做是独立的容器，里面元素的情况不会影响到外面。

BFC 一些特性：

下边距不重叠、可以清除浮动、可以阻止元素被覆盖

触发BFC的元素仍然保持流式特性，反映在布局上就是自动填满除去浮动内容以外的剩余空间。

触发BFC的方法：

body根元素

float（除了 none）

position（绝对、固定）

overflow: hidden、auto、scroll

display: inline-block、flex、tabel-cells

清除浮动：

<div class="topDiv">
    <div class="floatDiv">float left</div>
    <div class="textDiv">...</div>
</div>
<div class="bottomDiv">...</div>

.topDiv {
    width: 500px;
    border: 2px solid black;
}
.floatDiv {
    width: 100px;
    height: 100px;
    border: 2px dotted red;
    color: red;
    margin: 4px;
    float: left;
}
.bottomDiv {
    width: 500px;
    height: 100px;
    margin: 5px 0;
    border: 2px dotted black;
}
.textDiv {
    color: blue;
    border: 2px solid blue;
}

1.给需要清除浮动的元素添加clear样式：

.textDiv {
    color: blue;
    border: 2px solid blue;
 
    clear: left;
}

2.（这里我想，是不是加个前提：包含浮动元素的会更准确一点）父元素结束标签之前插入清除浮动的块级元素

<div class="topDiv">
    <div class="textDiv">...</div>
    <div class="floatDiv">float left</div>
    <div class="blankDiv"></div>
</div>
<div class="bottomDiv">...</div>


.blankDiv {
    clear: both; // or left
}

3.利用伪元素（clearfix）

（给父元素增加一个类，这个类上的伪元素写 clear:both）

<div class="topDiv clearfix">
    <div class="textDiv">...</div>
    <div class="floatDiv">float left</div>
</div>
<div class="bottomDiv">...</div>

// 省略基本的样式
// 区别在这里
.clearfix:after {
    content: '.';
    height: 0;
    display: block;
    clear: both;
}

4. 利用(给父级 )overflow清除浮动

<div class="topDiv">
    <div class="floatDiv">float left</div>
    <div class="textDiv">...</div>
</div>
<div class="bottomDiv">...</div>


.topDiv {
    width: 500px;
    padding: 4px;
    border: 2px solid black;
 
    // 区别在这里
    overflow: auto;
}

IE版本低的，此时要加上 zoom：1

这里的overflow值，还可以是除了"visible"之外的任何有效值，它们都能达到撑起父元素高度，清除浮动的目的。

scroll值会导致滚动条始终可见，hidden会使得超出边框部分不可见等。

BFC的高度是要包括浮动元素的，所以.topDiv的高度被撑起来，达到了清除浮动影响的目的。

overflow:溢出隐藏