零副作用 解决css边距折叠和高度坍塌
背景：主要是想 零副作用 解决上面的问题
大纲：
- 如何解决边距折叠？
- 常见的解决办法有哪些副作用？
- 如何解决高度坍塌等浮动问题？
- 常见的解决办法有哪些副作用？
零副作用 解决边距折叠
margin折叠的一个小案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body { margin: 0;}
</style>
</head>
<body>
<div class="container" style="margin-top: 10px; background-color: deeppink;">
<div class="child" style="margin-top: 50px; background-color: cyan; ">word</div>
</div>
</body>
</html>
边距折叠有2种，父子折叠和兄弟间折叠，解决办法是一样的：
常见的解法有：
- 生成新的BFC：比如：给父加上: overflow，绝对定位，flex，inline-block
- 给父加上：border 或 padding
这些常见的解法，都会有副作用。比如：
- 假设用了overflow，我可能想要auto，确给设置了hidden
- 直接给父加上border 或 padding，即使是1个像素，也多少有点区别
零副作用 解法：
- （子元素内，如果没有浮动元素的话）给父加上：
display: flex; flex-direction: column;，既可以解决margin折叠问题，也没有上面提到的副作用 - （子元素内，有浮动元素的话）那只能考虑给父元素加padding，然后子元素的margin对应的减少一点了。或直接padding替换掉margin
另外tips：水平方向没有margin折叠
零副作用 解决高度坍塌
高度坍塌 小示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body { margin: 0;}
</style>
</head>
<body>
<div class="container" style="background-color: deeppink;">
<div class="child" style="height: 100px; background-color: cyan; float: left">word</div>
</div>
</body>
</html>
解法思路：清除浮动float（解决：高度坍塌，文字环绕等）
常见的解法有：
- 生成新的BFC：同上 （会有副作用）
零副作用 解法：
- 使用（after伪元素 + clear:both）清除浮动（在父元素上使用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body { margin: 0;}
.clearfix::after {
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
</style>
</head>
<body>
<div class="container clearfix" style="background-color: deeppink;">
<div class="child" style="height: 100px; background-color: cyan; float: left">word</div>
</div>
</body>
</html>
码字不易，点赞鼓励！！
