清除浮动问题的分析

最新推荐文章于 2024-07-25 10:45:42 发布

不败的德鲁叔叔

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量203

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_41105127/article/details/79711356

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

题外话

首先，我们要思考一个问题：为什么要清除浮动呢？在我做小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

不败的德鲁叔叔

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除浮动问题的分析

题外话首先，我们要思考一个问题：为什么要清除浮动呢？在我做小demo的时候，碰到一个问题，当子元素浮动的时候，父元素的背景颜色消失了？可以说，以当时我的菜鸟水平，是不知道为什么父元素的背景颜色为什么会不见，我明明设置了背景颜色的，难道颜色格式不对？或者是浏览器不兼容，是个css hack？？？？？？？？所有的猜测都指向了背景颜色，都是背景颜色的错。正题为什么要清除浮...
复制链接

扫一扫

专栏目录