CSS中overflow:hidden与float搭配使用的运行原理是什么

float 特性前置 #

• 浮动元素默认脱离普通文档流，父元素未显式设置高度时，计算自身高度不会把浮动子元素的尺寸纳入统计。如果去掉你代码里.parent的overflow:hidden属性，会看到红色父容器高度只有上下padding总和的20px，无法包裹子元素，下方的p标签也会跑到浮动子元素旁并排显示。

overflow:hidden 的核心作用 #

overflow:hidden 在这里的作用不是裁剪内容，而是触发了 BFC（块级格式化上下文）。BFC 是 CSS 中独立的渲染区域，有专属的渲染规则，其中明确要求：BFC 容器计算自身高度时，必须包含内部的所有浮动元素。
所以你给.parent加上overflow:hidden之后，父容器变成了BFC容器，就能被内部的左浮动子元素撑出对应高度，红色背景可以正常覆盖所有子元素，下方p标签也不会和浮动元素产生布局重叠。

补充说明 #

除了overflow:hidden，还有很多方式可以触发BFC实现浮动包裹效果，比如设置display: flow-root、float: left/right、position: absolute/fixed等，其中display: flow-root是专门用来触发BFC做浮动清除的属性，不会有overflow:hidden可能带来的内容裁剪副作用，更推荐现在的项目使用。

测试代码参考 #

CSS代码：

.parent{
    background-color: red;
    padding: 10px;
    overflow: hidden;
}
.parent div{
    background-color: #eee;
    float: left;
}

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/float.css">
    <title>Document</title>
</head>
<body>
    <div class="parent">
        <div>product one</div>
        <div>product one</div>
        <div>product one</div>
        <div>product one</div>
    </div>
    <p>this is a paragraph</p>
</body>
</html>

内容的提问来源于stack exchange，提问作者tino