float浮动和清除float浮动

Posted daydayupyxq

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了float浮动和清除float浮动相关的知识，希望对你有一定的参考价值。

1.Float的介绍

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄(塌陷的产生)。技术分享图片 
注：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

浮动模型的基本知识：浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样.《CSS Mastery》一书中讲的特别有趣和好理解，我简单的用几个demo介绍一下。

a.不浮动的时候
<div style="border: solid 5px #0e0; width:300px;">
        <div style="height: 100px; width: 100px; ">
        </div>
        <div style="height: 100px; width: 100px;  ">
        </div>
        <div style="height: 100px; width: 100px; ">
        </div>
 </div>

技术分享图片

b.当red部分右浮动：
<div style="border: solid 5px #09F; width:300px;">
            父元素内容
            <div style="height: 100px; width: 100px;  float:right;">
            </div>
            <div style="height: 100px; width: 100px; ">
            </div>
            <div style="height: 100px; width: 100px; ">
</div>

技术分享图片

c.当red部分左浮动：
<div style="border: solid 5px #09F; width:300px;">
        父元素内容
        <div style="height: 100px; width: 100px;  float:left;"></div>
        <div style="height: 100px; width: 100px; "></div>
       <div style="height: 100px; width: 100px; "></div>
</div>

技术分享图片

 

此时的green和yellow部分和”父元素内容”是在普通文档流中，red部分覆盖了文档流中的green部分。

d.所有的向左浮动,父元素的高度为0
<div style="border: solid 5px #09F; width:300px;">
            <div style="height: 100px; width: 100px;  float:left;">
            </div>
            <div style="height: 100px; width: 100px;  float:left;">
            </div>
            <div style="height: 100px; width: 100px;  float:left;">
</div>

技术分享图片

 

当所有的元素都向左或者是向右浮动（此例子效果相同如上图），父元素未浮动，此时父元素就会出现塌陷，即父元素的高度为0px。

如果父包含块太窄而无法容纳水平排列的多个浮动元素时,那么其它浮动块儿向下移动,,直至找到有足够的宽度容纳浮动块,如果浮动元素的高度不同,那么在向下移动的时候可能会被卡住。

e.当父元素的宽度不足以容纳所有的浮动元素时，浮动块就会下移，如下图：
<div style="border: solid 5px #09F; width:240px;">
    <div style="height: 100px; width: 100px;   float:left;">
    </div>
    <div style="height: 100px; width: 100px;   float:left;">
    </div>
    <div style="height: 100px; width: 100px;   float:left;">
    </div>
</div>

技术分享图片

f.当高度不等时会出现类似“卡住了”现象，如下图
<div style="border: solid 5px #09F; width:240px;">
    <div style="height: 110px; width: 100px;   float:left;"> </div>
    <div style="height: 100px; width: 100px;   float:left;"> </div>
    <div style="height: 80px; width: 100px;   float:left;"> </div>
</div>

技术分享图片

 

2. 清除浮动【float】

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。如上一篇中讲到的所有元素左浮动时，元素塌陷即父元素高度为0px；

清除浮动前：技术分享图片

方法一：使用带clear属性的空元素清除

<style>
.clear {
    clear: both;
}
</style>

<body>
    <div style="border: solid 5px #09F; width:300px;">
        <div style="height: 100px; width: 100px;   float:left;">
        </div>
        <div style="height: 100px; width: 100px;   float:left;">
        </div>
        <div style="height: 100px; width: 100px;   float:left;">
        </div>
        <div class="clear"></div>
    </div>
</body>

清除浮动后： 

技术分享图片 
优点：简单，代码少，浏览器兼容性好。 
缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

方法二：使用CSS的overflow属性

给未浮动的父元素设置 overflow: auto;或 overflow: hidden;属性。另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。

<div style="border: solid 5px #09F; width:300px; overflow: auto;">
    <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
    </div>
    <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
    </div>
    <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
    </div>
</div>
 

方法三：给浮动的元素的容器添加浮动

    

  • 

    

    <div style="border: solid 5px #09F; width:300px; float:left;">
    <div style="height: 100px; width: 100px;   float:left;">
    </div>
    <div style="height: 100px; width: 100px;   float:left;">
    </div>
    <div style="height: 100px; width: 100px;   float:left;">
    </div>
</div>
    

    

    缺点：给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用，当父元素是body时设置无效。
    

    •

方法四：使用CSS的:after伪元素 
结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。 
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

<style>
    .clearfix:after{
      content: "."; 
      display: block; 
      height: 0; 
      clear: both; 
      visibility: hidden;  
      }         
    .clearfix {
      zoom: 1; /*兼容IE6 IE7*/
      }
</style>
<body>
    <div class="clearfix" style="border: solid 5px #09F; width:300px; ">
        <div style="height: 100px; width: 100px;   float:left;">
        </div>
        <div style="height: 100px; width: 100px;   float:left;">
        </div>
        <div style="height: 100px; width: 100px;   float:left;">
        </div>
       </div>    
</body>

通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格”020”或点”.”，并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。

方法五：使用邻接元素处理 
给浮动元素后面的元素添加clear属性，此元素与浮动元素是同一级的元素。 
清除前： 
技术分享图片

<div style="border: solid 5px #09F; width:500px; ">
   <div style="height: 100px; width: 100px;   float:left;"></div>
   <div style="height: 100px; width: 100px;   float:left;"></div>
   <div style="height: 100px; width: 100px;   float:left;"></div>
   <div style="clear: both; background: #800080;">同级元素</div>
</div>

清除后： 

技术分享图片









以上是关于float浮动和清除float浮动的主要内容，如果未能解决你的问题，请参考以下文章

清楚float

清除浮动float

1.Float浮动和清除浮动

清除float浮动造成影响的几种解决方案

float 关于使用浮动 和清除浮动

float与清除浮动的注意事项有哪些？