从另外一个角度认识float 浮动

从感性角度认识【float】浮动：

float设计的初衷并非为了高大上的布局，仅仅是实现文字环绕效果，明白了文字设计的初衷，就能够明白浮动不少特有的表现了

<style>

.test1{
        width:400px;
        margin:20px;

}

img{
        float:left;
        margin-right:15px;

}
</style>
<div class="test1">

<img src="http://img.mukewang.com/53d60af3000171a002560191.jpg"/>

<p>学术论文是对某个科学领域中的学术问题进行研究后表述科学研究成果的理论文章。</p>
<p>实际上，当年，我还在念大学那会儿，我就把我收藏的一些美女照片调成成固定的几个比例，专门用来作演示使用。</p>
<p>学术论文是对某个科学领域中的学术问题进行研究后表述科学研究成果的理论文章。
学术论文的写做是很是重要的，它是衡量一我的学术水平和科研能力的重要标志。在学术论文撰写中，选题与选材是头等重要的问题。一篇学术论文的价值关键并不仅在写做的技巧，也要注意研究工做自己。在于你选择了什么课题，并在这个特定主题下选择了什么典型材料来表述研究成果。科学研究的实践证实，只有选择了有意义的课题，才有可能收到较好的研究成果，写出较有价值的学术论文。因此学术论文的选题和选材，是研究工做开展前具备重大意义的一步，是必不可少的准备工做。学术论文，就是用系统的、专门的知识来讨论或研究某种问题或研究成果的学 理性文章。具备学术性、科学性、创造性、学理性。</p>
<p>然而，事实是什么呢？</p>

</div>

1.float的包裹特性：

所谓包裹，就像穿了紧身衣同样，按照自身的宽高呈现出来，就是指包含内容的容器

包裹有三种特性：

          1.收缩：☞ 水平方向变窄，即宽度收缩为自身内容的宽度
        2.坚挺：☞ 高度和内容自身的高度同样
        3.隔绝：☞ 块级格式化上下文

2.float的“破坏”特性：

所谓“破坏”，其实指的是当对一个容器内的内容元素设一个float：left，或者是float:right属性时会形成父元素容器高度的塌陷，虽然如此，但他其实并无破坏什么，为何这么说呢？————

****答案就是float的初衷：float仅仅是为了实现文字环绕效果

父元素塌陷后，下面的文字就会环绕上来，这也就是浮动里文字环绕图片的缘由所在

3.解决这种“破坏”的方法，请看下面：

——清除浮动

两大方法：

1.在底部插入样式为clear：both的div，跟外部依然是直接接触的，可发生margin重叠的效果。
2.让父元素BFC是高级浏览器特有的概念或haslayout(IE6,IE7)私有的，但不会与外面发生影响，即不会发生margin重叠的效果。

4.浮动的滥用

浮动可让元素block块状化

“破坏性”形成的紧密排列特性（去空格化）**

float砌砖布局容错性很差，容易出问题；
须要尺寸是一直固定的，因而当一个模块须要在另外一个尺寸的容器中使用时，就会须要从新调整，彻底没有重用性；
在低版本的IE下会有不少问题。

5.float与流体布局

文字环绕衍生——单侧固定

这种布局的基本布局结构以下：
前面一个标签元素：

width:px;
float:left;

后面总体：

padding-left/margin-left