题外话
首先,我们要思考一个问题:为什么要清除浮动呢?在我做小demo的时候,碰到一个问题,当子元素浮动的时候,父元素的背景颜色消失了?可以说,以当时我的菜鸟水平,是不知道为什么父元素的背景颜色为什么会不见,我明明设置了背景颜色的,难道颜色格式不对?或者是浏览器不兼容,是个css hack????????所有的猜测都指向了背景颜色,都是背景颜色的错。
正题
为什么要清除浮动?
在坑中不断挣扎的我,得到了答案,不是背景颜色的错。而是它的子元素。当子元素浮动的时候会导致父元素的height变为0,这是为什么呢?
原因是父元素没有设置高度,原本的高度,是由子元素撑起来的。当子元素浮动的时候,子元素是脱离文档流的,而父元素还是文档流里,这个时候,父元素的content没有东西,所以父元素的height就变为原本没有设置的高度(为0)。如果父元素的content中有非float的元素,则以这些元素的最高的高度撑起父元素的高度。如图所示:
HTML代码
<div class="container">
<img src="./2.png" alt="" class="a">
<img src="./1.png" alt="" class="b">
<img src="./1.png" alt="" class="b">
</div>
在没有浮动时的情况:
HTML代码
<div class="container">
//此时大图片左浮动,及下图的效果
<img src="./2.png" alt="" class="a" style = "float: left;">
<img src="./1.png" alt="" class="b">
<img src="./1.png" alt="" class="b">
</div>
在浮动时的情况:(大图片float:left;小图片不变)
可以从上面的分析得出。子元素浮动,会导致父元素出现“高度塌陷”。
如何清除浮动?
清除浮动的方式有很多种,目前看到有八种左右的清除浮动的方式。但真正用到项目里,最常见的方式有两种:
1.添加伪类:after;
2.触发BFC;
1.添加伪类:after
给父元素添加一个类clearfix,并给这个类设置伪类:after。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clearfix:after {
content: " ";
display: block;
clear: both;
}
.a {
float: left;
}
</style>
</head>
<body>
<div class="container clearfix">
<img src="./2.png" alt="" class="a">
<img src="./1.png" alt="" class="b">
<img src="./1.png" alt="" class="b">
</div>
</body>
</html>
看吧!这就是第一种清除浮动的方法。也是广受欢迎的一种清除浮动个方式。
2.触发BFC
1)什么是BFC?
BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。摘自W3C:
浮动,绝对定位元素,inline-blocks, table-cells, table-captions,和overflow的值不为visible的元素,(除了这个值已经被传到了视口的时候)将创建一个新的块级格式化上下文。
上面的引述几乎总结了一个BFC是怎样形成的。但是让我们以另一种方式来重新定义以便能更好的去理解。一个BFC是一个HTML盒子并且至少满足下列条件中的任何一个:
- float的值不为none
- position的值不为static或者relative
- display的值为 table-cell, table-caption, inline-block, flex, 或者
inline-flex中的其中一个 - overflow的值不为visible
2) 如何用BFC清除浮动
粗暴的总结就是让浮动块包含在同一个BFC中加同时(也可以理解为包含块加属性overflow:hidden)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container {
overflow: hidden;
}
.a {
float: left;
}
</style>
</head>
<body>
<div class="container">
<img src="./2.png" alt="" class="a">
<img src="./1.png" alt="" class="b">
<img src="./1.png" alt="" class="b">
</div>
</body>
</html>
有利也有弊,下面简单指出BFC的缺点:
- display:table可能会产生一些问题
- overflow:scroll可能会显示不必要的滚动条
- float:left将会把元素置于容器的左边,其他元素环绕着它
- overflow:hidden将会剪切掉溢出的元素
参考链接: https://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html