如何触发 bfc 规则
- 浮动元素:float 除 none 以外的值
- 绝对定位元素:position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
十分钟理解 BFC 原理
注意:如果设置了float: left/right
或者position: absolute
,浏览器会将其转为inline-block
<!-- log -->
<style>
.span {
/* 加入float之后,即便是inline也可以设置宽高了 */
float: left;
300px;
height: 100px;
background-color: green;
}
</style>
<span class="span">我是一个span</span>
<div class="clear"></div>
float 的遮挡问题
<!-- log -->
<style>
#test-float .span {
float: left;
height: 30px;
100px;
background-color: rgba(255, 0, 0, 0.2);
}
#test-float .div {
background-color: aqua;
}
</style>
<div id="test-float">
<span class="span">1</span>
<span class="span">2</span>
<div class="div">div</div>
</div>
margin 塌陷
如果一个元素的所有子元素都是浮动的,那么这个元素高度就是 0(若没有指的宽度,就是父元素宽度),发生在父子元素之间
解决方法:
- 使父元素触发 bfc 规则
- margin-top:1px solid black;(不好)
margin 合并
发生在兄弟元素之间
解决方法:
- 不解决
- 使父元素触发 bfc 规则(不好,徒增了 HTML 元素)
float 浮动流问题
浮动元素产生了浮动流,对于浮动流,块级元素看不到,只有 bfc 元素和文本类属性的元素(比如图片)才能看到。
问题:父元素包不住浮动的子元素。如(红色为父元素的边框):
<!-- log -->
<div class="float-container">
<div class="float">1</div>
<div class="float">2</div>
<div class="float">3</div>
<div class="float">4</div>
<div class="float">5</div>
<div class="float">6</div>
<div class="float">7</div>
<div class="float">8</div>
<div class="float">9</div>
</div>
<div class="clear"></div>
<style>
.my-container {
height: 300px;
}
.float-container {
max- 300px;
border: 5px solid red;
}
.float-container .float {
float: left;
100px;
height: 100px;
color: white;
background-color: #000000;
}
</style>
为什么会出现这种现象呢?那就是加了浮动之后的元素脱离了标准流,所以父容器出现了高度塌陷。
解决方法
- clear + 引入一个无用的 html 元素
- clear + 伪元素选择器
- 给父元素加一个高(不推荐,不够灵活)
- 让父级元素触发 bfc 规则,使其能看到 float
方法一:
<!-- log-after -->
<div class="float-container-1">
<div class="float">1</div>
<div class="float">2</div>
<div class="float">3</div>
<div class="float">4</div>
<div class="float">5</div>
<div class="float">6</div>
<div class="float">7</div>
<div class="float">8</div>
<div class="float">9</div>
<div class="my-clear"></div>
</div>
<style>
.float-container-1 {
max- 300px;
border: 5px solid red;
}
.float-container-1 .float {
float: left;
100px;
height: 100px;
color: white;
background-color: #000000;
}
.float-container-1 .my-clear {
clear: both;
}
</style>
博客园就是用到方法一,这种方法的缺点在于增加了多余的 HTML 元素。
方法二:
<!-- log-after -->
<div class="float-container-2 clearfix">
<div class="float">1</div>
<div class="float">2</div>
<div class="float">3</div>
<div class="float">4</div>
<div class="float">5</div>
<div class="float">6</div>
<div class="float">7</div>
<div class="float">8</div>
<div class="float">9</div>
</div>
<style>
.float-container-2 {
max- 300px;
border: 5px solid red;
}
.float-container-2 .float {
float: left;
100px;
height: 100px;
color: white;
background-color: #000000;
}
.clearfix::after {
content: '';
clear: both;
/* clear只对block生效 */
display: block;
}
</style>