浮动与清除浮动

1、浮动（float：）

      首先再讲浮动之间咱们先来弄懂什么是标准文档流？

      标准文档流在HTML中是指具备必定标签属性，且符合html语义的html文档，其微观表现是：一、空白折叠现象：好比当想让两个标签紧靠是中间不可有空格。二、高矮不齐时，默认底部对齐。三、满行会自动换行。

      其按标签分可分为：文本级和容器级。 按文档流可分为：块级元素和行内元素。

     而后今天要讲的主题中浮动即可是文档脱离标准文档流。

      浮动的影响有4种状况：

      其一：使元素脱离标准文档流。

      其二：浮动的元素相互紧贴。

      其三：浮动的元素会有“字围”效果，例如，让文字围绕在图片周围等。

      其四：浮动的收缩性，例如，若浮动没有设置宽高，其就会缩到内容的大小。

    另外，托标的元素不能把父元素蹭出高度。

 二 、   那么如何清楚浮动呢？

      其也有四种方法：

      一、 给浮动的元素的祖先元素加个高度这样就可使祖先元素里的浮动  

      以下图：  加高以后：

二、在下边元素中加clear：both；

例：

三、使用“隔墙法”，（不少技术大牛喜欢用”内墙法“）

例：

内墙法，则是把class=“cl h8”这个div、放到box1的里面的下面去，一样能够实现如上效果

四、使用overflow：hidden；将浮动清除

例：

本文主讲的是清除浮动，而清除浮动的方法以这四种为主，欢迎你们增长，提意见，欢迎关注！