消灭浮动 or 闭合浮动

2024年3月5日 188次阅读 来源: dinglittle

为何要消灭浮动

  • 子元素 float:left; 离开文档流,会形成父元素陷落(撑不起来)
  • 父元素 靠子元素撑起来
  • 消灭浮动 clear:both
<h1>消灭浮动</h1>
<div class="border-div clear">
    <div class="div1">
        
    </div>
    <div class="div2">
        
    </div>
</div>


// 伪元素 :after
.clear:after{
    clear:both;
    content:".";
    display:table;
    width:0;
    height:0;
    visibility:hidden;
}
  • 闭合浮动 – 增添分外元素 clear:both

父级元素不设置 height

子元素 float:left

分外增添元素 clear:both 
<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
    <div style="clear:both"></div>
</div>
  • 闭合浮动 — 运用 br 和其本身的 html 属性

==注重== clear=all 不引荐运用的属性(moz)

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
    <br clear="all">
</div>
  • 闭合浮动 — 父元素设置 overflow:hidden
<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
</div>
  • 闭合浮动 — 父元素设置 display:table
<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
</div>
    原文作者：dinglittle
    原文地址: https://segmentfault.com/a/1190000018328093
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞