让css初学者抓狂的属性float

挣扎了很久，始终没有决定要不要写博客，内心有几个顾虑一是我是小白，我写的文章有没有人看？二是我是小白，我写的文章假如存在诸多错误，理解的不对发表上去再去误导别人。三是写一篇文章费时费力。可是我如今想明白了，我不写技术大牛的文章，就写菜鸟的学习型文章。我写文章是为了我本身，不是为了别人。有错误正好别人提出改正。

写文章有几个好处，一来能够理清思绪，对于我这个思惟混乱的人来讲是再好不过的方法了，二来能够记录学习知识，方便之后忘记了能够回来看看。三是已积累起来的文章可让本身颇有成就感。

文章可能是学习别人文章的总结和本身的我的看法，因此实际上有些认识多是不许确的，欢迎大神们指点，也欢迎交流。

 

Float属性是css必会属性之一，可是它看上去简单，却有很深的奥义。看了张鑫旭的两篇文章，对于float的理解提升了一个层次。

http://www.zhangxinxu.com/wordpress/?p=583 CSS float浮动的深刻研究、详解及拓展(一)

http://www.zhangxinxu.com/wordpress/?p=594 CSS float浮动的深刻研究、详解及拓展(二)

如下是我对于他的文章写的我的总结和一些认识。

 

再讲float属性以前，必需要知道高度的概念和display：inline-block的包裹性

高度由两个css模型产生：

一个是box模型（content的height+padding+margin），这个是最基础的你们应该都是知道；

一个是line box模型（line-height，内部的最高部分决定），这个里面就很深奥，让我学习了一番。

 

 

还要说一下display：inline-block的包裹性，即设置了这个属性，该元素拥有block的属性能够设置宽和高了，也用拥有了行内元素的属性，宽和高将根据内容自适应。这里强调的是他后面的属性根据内容自适应宽和高的特性。

通常状况下一个块级元素，没有设置display：inline-block这个属性，元素也没有设置宽度的话，元素的宽应该是继承父元素的宽度，若是是行内元素，没有设置display：inline-block这个属性，它的宽度和高度是由内容自适应，可是设置高度和宽度是无论用的。

 

 

display：inline-block结合了行内和块级元素，你不设置宽高，我就按内容自适应，你设置了我就按你设置的走。

 

那么下面咱们来讲浮动（float）

1、浮动的本质是用来文字环绕的，像分栏布局和列表排列均可用其它属性实现。

2、浮动是一个带有方位的display：inline-block；因此设置浮动，就会有默认的display：inline-block；这个属性。不须要再写display了；设置display：inline-block带来的各类效果，好比高宽自适应而不是继承父元素宽。能够设置高和宽。他的先后不会像块级元素默认换行（可是它没有高度）。

3、浮动会破坏inline-box，产生两个结果。①（无inlinebox->无line-box->无高度）。②图片与文字没法同行显示。这两个结果偏偏是文字环绕的所必需的。

 

实践与解释

 

文字多了，你看就是所谓的环绕效果吧

 

 

Float：left|right;与position：absolute;的一些区别

Float：left|right;属性与position：absolute属性都具备包裹性，二者都会使元素脱离文档流，可是，与absolute不一样的是：float 的元素还会在文档流上占据一个位置。position:absolute的元素是根据最近的非static的父元素定位，若是没有，则根据最初的包含块定义（通常是body），关于float，也会脱离文档流，会被放置在其容器的左边或右边。

关于下列问题

1关于li标签水平排列等一系列float应用及原理

2浮动会破坏本身，影响别人

①   浮动产生bug的缘由

②   清楚浮动的方法与本质

3浮动布局的替代效果

尚未具体学习等学习以后再好好总结。