为何要消灭浮动
- 子元素 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>