关于清除浮动

浮动：它不是一个正常流布局，浮动元素会从文档的正常流中删除，但是他还是会影响布局，浮动应用于所有的元素，当一个元素浮动时，其他内容会“环绕”该元素。

float属性有四个值：left，right分别浮动元素到相应的方向，none（默认），使元素不浮动，inherit将从父级元素获取float值

float可用来创建全部网页布局，如导航条的一行排列，左右两栏布局，浮动在左右两栏布局中很常见。

<style>
    .content {
            background-color: black;
            border: 2px solid red;
            
    }
    .div1 {
            width: 20%;
            height: 200px;
            background-color:red ;
            float: left;
    }
    .div2 {
            width: 20%;
            height: 200px;
            background-color: blue;
            float: left;
    }
    </style>
    <body>
        <div class="content">
            <div class="div1"></div>
            <div class="div2"></div>
        </div>

当没有给父元素设定高度的时候，子元素浮动会造成父元素高度就会塌陷为零。

为什么会造成这种情况呢？

打个比方，父元素就如一个有伸缩性的容器，而子元素就如一个气球。当没有设置容器的高宽时，他的高宽完全是被装在里面的气球撑开的，当子元素浮动时候，就像气球从容器里飘了出来，飘在了他的上方。而此时容器也就空了，由于伸缩性，高度就变为了0，看不见了。

现在来讨论一下解决方案以及最优解。

1. 父元素也添加浮动

.content {
          background-color: black;
          width: 100%;
          float: left;
        }

缺点：虽然可以解决问题，但是后面要添加有不需要浮动的子元素，则影响其显示。

2.给父元素添加一个夯余元素

<div style="clear:both;"></div>

注：clear 属性规定元素的哪一侧不允许其他浮动元素。

当添加了最后一个冗余元素（未设置clear:both）时；父元素和此冗余元素的高度都为0，并且三个浮动的元素都浮在了它们的上方盖住了它们（可以把它们看成PS中的图层）。现在，给这个冗余元素添加clear:both，它便要躲开这三个浮动元素，因此，一直往下跑，直到没有被浮动元素盖住才停下来。而父元素看到这个子元素跑开了，自然想要包裹住它。

加上clear:both后，夯余元素从顶部跑到底部。就这样父元素被撑开了。

缺点：添加了一个无关元素，代码阅读受影响，不符合语义化。

3.给父元素content添加一个伪类

.content::after {
    content: " ";
    display: block;
    clear: both;
}

这个方法比较清晰，也提高了易读性。推荐这个。

4.给父元素添加overflow: hidden;

.content {
            background-color: black;
            border: 2px solid red;
            overflow: hidden;
    }

缺点：一旦包含非浮动的子元素，则会影响其显示。

下面我们来讨论一下为什么overflow:hidden可以解决这个问题，它不是用于当子元素超出范围然后裁剪的吗？

先引入一个概念：BFC（块级格式化上下文）

W3C对BFC的定义如下：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如inline-blocks, table-cells, table-captions)，以及overflow值不为“visiable”的块级盒子，都会为它们的内容创建新的BFC。

创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC，它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。其中一条属性为：计算BFC的高度时，浮动元素也参与计算。

所以给父元素创建块级格式化上下文，就可以让浮动的元素参与高度计算，这样一来，父元素的高度就有了。所以使用overflow.hidden会触发BFC，让浮动元素也参与计算高度中。

不单单只有给父元素添加overflow:hidden才可以创建块级格式化上下文，下列方法都可以：

浮动 (元素的 float不为 none）
绝对定位元素 (元素的 position为 absolute 或 fixed)
行内块 inline-blocks (元素的 display: inline-block)
表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素的 display: table-caption，HTML表格标题默认属性)
overflow的值不为 visible的元素
弹性盒子 flex boxes (元素的 display: flex 或 inline-flex)

用overflow:hidden较多的原因是不会带来其它的布局问题。

参考：https://www.jianshu.com/p/5a7854a73298

CSS中为什么overflow:hidden能清除浮动(float)的影响？原理是什么？ - 知乎

相关推荐