让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）

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

二、浮动是一个带有方位的display：inline-block；所以设置浮动，就会有默认的display：inline-block；这个属性。不需要再写display了；设置display：inline-block带来的各种效果，比如高宽自适应而不是继承父元素宽。可以设置高和宽。他的前后不会像块级元素默认换行（但是它没有高度）。

三、浮动会破坏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浮动布局的替代效果

还没有具体学习等学习之后再好好总结。