从另一个角度认识float 浮动

1

从感性角度认识【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

你可能感兴趣的

载入中...