css 使用position:absolute清除子级浮动的优缺点？ CSS清除定位position
\u5728HTML5 CSS3\u4e2d,\u8bf7\u7b80\u8ff0\u4e00\u4e0b\u6e05\u9664\u6d6e\u52a8\u7684\u4e09\u79cd\u65b9\u6cd5\u4ee5\u53ca\u5404\u81ea\u7684\u4f18\u7f3a\u70b9\uff1f1\u3001\u4f7f\u7528clear:both\u6e05\u9664\u6d6e\u52a8
\u5728\u4ee3\u7801\u4e2d\u5728\u653e\u4e00\u4e2a\u7a7a\u7684div\u6807\u7b7e\uff0c\u7136\u540e\u7ed9\u8fd9\u4e2a\u6807\u7b7e\u8bbe\u7f6eclear:both\u6765\u6e05\u9664\u6d6e\u52a8\u5bf9\u9875\u9762\u7684\u5f71\u54cd\u3002
\u4f18\u70b9\uff1a\u7b80\u5355\uff0c\u65b9\u4fbf\u517c\u5bb9\u6027\u597d
\u7f3a\u70b9\uff1a\u56e0\u4e3a\u4f1a\u9020\u6210\u7ed3\u6784\u6df7\u4e71\uff0c\u4e0d\u5229\u4e8e\u540e\u671f\u7ef4\u62a4
\u5efa\u8bae\uff1a\u4e00\u822c\u60c5\u51b5\u4e0b\u4e0d\u5efa\u8bae\u4f7f\u7528\u8be5\u65b9\u6cd5
2\u3001\u5229\u7528\u4f2a\u5143\u7d20clearfix\u6765\u6e05\u9664\u6d6e\u52a8
\u7ed9\u7236\u7ea7\u5143\u7d20\u6dfb\u52a0\u4e86\u4e00\u4e2a:after\u4f2a\u5143\u7d20\uff0c\u901a\u8fc7\u6e05\u9664\u4f2a\u5143\u7d20\u7684\u6d6e\u52a8\uff0c\u8fbe\u5230\u6491\u8d77\u7236\u5143\u7d20\u9ad8\u5ea6\u7684\u76ee\u7684
.clearfix:after {
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.clearfix { zoom: 1; }
\u539f\u7406\uff1aIE8\u4ee5\u4e0a\u548c\u975eIE\u6d4f\u89c8\u5668\u624d\u652f\u6301:after\uff0czoom(IE\u8f6c\u6709\u5c5e\u6027)\u53ef\u89e3\u51b3ie6,ie7\u6d6e\u52a8\u95ee\u9898
\u4f18\u70b9\uff1a\u6d4f\u89c8\u5668\u652f\u6301\u597d\uff0c\u4e0d\u5bb9\u6613\u51fa\u73b0\u602a\u95ee\u9898\uff08\u76ee\u524d\uff1a\u5927\u578b\u7f51\u7ad9\u90fd\u6709\u4f7f\u7528\uff0c\u5982\uff1a\u817e\u8fc5\uff0c\u7f51\u6613\uff0c\u65b0\u6d6a\u7b49\u7b49\uff09
\u7f3a\u70b9\uff1a\u4ee3\u7801\u591a\uff0c\u4e0d\u5c11\u521d\u5b66\u8005\u4e0d\u7406\u89e3\u539f\u7406\uff0c\u8981\u4e24\u53e5\u4ee3\u7801\u7ed3\u5408\u4f7f\u7528\uff0c\u624d\u80fd\u8ba9\u4e3b\u6d41\u6d4f\u89c8\u5668\u90fd\u652f\u6301
\u5efa\u8bae\uff1a\u63a8\u8350\u4f7f\u7528\uff0c\u5efa\u8bae\u5b9a\u4e49\u5728\u516c\u5171\u7c7b\uff0c\u4ee5\u51cf\u5c11css\u4ee3\u7801
3\u3001\u7236\u7ea7div\u5b9a\u4e49overflow\u65b9\u6cd5
\u5f53\u7ed9\u7236\u5143\u7d20\u8bbe\u7f6e\u4e86overflow\u6837\u5f0f\uff0c\u4e0d\u7ba1\u662foverflow:hidden\u6216overflow:auto\u90fd\u53ef\u4ee5\u6e05\u9664\u6d6e\u52a8\u53ea\u8981\u5b83\u7684\u503c\u4e0d\u4e3avisible\u5c31\u53ef\u4ee5\u4e86\u3002
.parent-container {
/* other style... */
overflow: hidden;
}
\u539f\u7406\uff1a\u5b83\u7684\u672c\u8d28\u5c31\u662f\u5efa\u6784\u4e86\u4e00\u4e2aBFC\uff0c\u8fd9\u6837\u4f7f\u5f97\u8fbe\u5230\u6491\u8d77\u7236\u5143\u7d20\u9ad8\u5ea6\u7684\u6548\u679c\u3002
\u4f18\u70b9\uff1a\u7b80\u5355\uff0c\u4ee3\u7801\u5c11\uff0c\u6d4f\u89c8\u5668\u652f\u6301\u597d
\u7f3a\u70b9\uff1a\u4e0d\u80fd\u548cposition\u914d\u5408\u4f7f\u7528\uff0c\u56e0\u4e3a\u8d85\u51fa\u7684\u5c3a\u5bf8\u7684\u4f1a\u88ab\u9690\u85cf
\u5efa\u8bae\uff1a\u53ea\u63a8\u8350\u6ca1\u6709\u4f7f\u7528position\u6216\u5bf9overflow:hidden\u7406\u89e3\u6bd4\u8f83\u6df1\u7684\u670b\u53cb\u4f7f\u7528
4\u3001\u53cc\u4f2a\u5143\u7d20\u65b9\u6cd5\u7684\u4f7f\u7528
\u901a\u8fc7\u7ed9\u7236\u5143\u7d20\u8bbe\u7f6e\u53cc\u4f2a\u5143\u7d20\u6765\u8fbe\u5230\u6e05\u9664\u6d6e\u52a8\u7684\u6548\u679c\uff0c\u5373\u6dfb\u52a0:before\u548c:after\u4f2a\u5143\u7d20\u3002
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
\u4e0e\u65b9\u6cd52\u76f8\u540c
position: static;
\u6dfb\u52a0\u5230\u5b50\u5143\u7d20CSS\u6837\u5f0f\u4e2d\u6e05\u9664\u5b9a\u4f4d
具体看应用场景，应用对的地方没有缺点。你根本不是真正了解这东西，在网上找两句话就来问。
你是完全不懂啊，说的自我感觉头头是道，要不是我多年经验都不能理解你说的话，方法很多，给你举几个例子
方法1、clear: both;清除
.banyinglong{border:red solid 1px;}
.banyinglong li{float:left;background: #ddd;}
.clear{clear:both;}
<ul class="banyinglong">
<li>1</li>
<li>2</li>
<li>3</li>
<div class="clear"></div>
</ul>
方法2、:after清除，与上一个原理一样
.banyinglong{border:red solid 1px;}
.banyinglong:after{content:'';display: block;clear: both;width:100%;height: 0;}
.banyinglong li{float:left;background: #ddd;}
<ul class="banyinglong">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
方法3、display:flow-root;是稍微新点的方法，基本很少有人用
.banyinglong{border:red solid 1px;display:flow-root;}
.banyinglong li{float:left;background: #ddd;}
<ul class="banyinglong">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
父元素position:absolute就是脱离文档流 跟清除子元素浮动 没啥关系啊
子元素浮动要么随BODY定位 要么随父元素定位
主要是没听过清除子元素浮动 这种说法
清除元素浮动不是用的这个吧，position多数是用于定位的
Vue实践-CSS样式position/display/float属性对比使用
扩展阅读：css position sticky ... css position relative ... css position fixed ... css display none ... css box-sizing ... css position absolute ... css overflow hidden ... css padding ... css margin ...
