CSS - 正确解决 float 高度坍塌的问题
2021-01-18 21:18
标签：overflow sky class 补充 after hidden color 灵活 char 子元素使用 float 后，使其脱离文档流 。 使父元素检测不到其尺寸。 1，为父元素设置高度 ， 缺陷是 ：不灵活 2，为父元素设置 float , 缺陷是 ：使父元素也脱离，没有真正解决 3，为父元素设置 overflow:hidden ， 缺陷是 ：会隐藏相关的元素 4，子元素后面添加 一个 clear:both 的 兄弟元素 ， 缺陷是 ： 使 html 添加了一个多余的结构 5，为父元素添加一个 content:"";clear:both;display:block 的伪类 。 （ 可取 ） CSS - 正确解决 float 高度坍塌的问题 标签：overflow sky class 补充 after hidden color 灵活 char 原文地址：https://www.cnblogs.com/500m/p/13339202.htmlDOCTYPE html>
html lang="en" dir="ltr">
head>
meta charset="utf-8">
title>正确解决高度塌陷title>
style media="screen">
.box {
border: 1px solid;
}
.float {
width: 100px;
height: 100px;
background: skyblue;
float: left;
}
.clearfix:after {
content:‘‘;
clear: both;
display:block;
}
style>
head>
body>
div class="box clearfix">
div class="float">
div>
div>
body>
html>
补充：
一， float 使父元素高度坍塌的原因 ：
二，5种解决方案 ：
文章标题：CSS - 正确解决 float 高度坍塌的问题
文章链接：http://soscw.com/index.php/essay/43824.html