关于浮动

Posted 2020-09-01 小艾想偷懒

浮动的原因

要解答这个问题，我们得先说说CSS中的定位机制：普通流，浮动，绝对定位 （其中"position:fixed" 是 "position:absolute" 的一个子类）。 
1）普通流：很多人或者文章称之为文档流或者普通文档流，其实标准里根本就没有这个词。如果把文档流直译为英文就是 document flow ，但标准里只有另一个词，叫做 普通流 （normal flow)，或者称之为常规流。但似乎大家更习惯文档流的称呼，因为很多中文翻译的书就是这么来的。比如《CSS Mastery》，英文原书中至始至终都只有普通流 normal flow（普通流） 这一词，从来没出现过document flow （文档流） 
2）浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。 
正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。

清除浮动的方法

第一种

<div class="warp" id="float1"> 
<h2>1）添加额外标签</h2> 
<div class="main left">.main{float:left;}</div> 
<div class="side left">.side{float:right;}</div> 
<div style="clear:both;"></div> 
</div> 
<div class="footer">.footer</div> 
/[code] 
优点：通俗易懂，容易掌握 
缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍受的，所以你看了这篇文章之后还是建议不要用了吧。 
2）使用 br标签和其自身的 html属性 
这个方法有些小众，br 有 clear=“all | left | right | none” 属性 
[code] 
<div class="warp" id="float2"> 
<h2>2）使用 br标签和其自身的 html属性</h2> 
<div class="main left">.main{float:left;}</div> 
<div class="side left">.side{float:right;}</div> 
<br clear="all" /> 
</div> 
<div class="footer">.footer</div>

第二种

<div class="warp" id="float3" style="overflow:hidden; *zoom:1;"> 
<h2>3)父元素设置 overflow </h2> 
<div class="main left">.main{float:left;}</div> 
<div class="side left">.side{float:right;}</div> 
</div> 
<div class="footer">.footer</div> 

第三种

<style type="text/css"> 
.clearfix:after { 
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden; 
} 
.clearfix {display: inline-block;} /* for IE/Mac */ 
</style> 
<!--[if IE]> <style type="text/css"> 
.clearfix {zoom: 1;/* triggers hasLayout */ 
display: block;/* resets display for IE/Win */} 
</style> 
<![endif]--> 

第四种

1、对父级设置适合CSS高度