让css初学者抓狂的属性float

时间:2023-03-08 16:59:40

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

写文章有几个好处,一来可以理清思绪,对于我这个思维混乱的人来说是再好不过的方法了,二来可以记录学习知识,方便以后忘记了可以回来看看。三是已积累起来的文章可以让自己很有成就感。

文章多是学习别人文章的总结和自己的个人见解,所以实际上有些认识可能是不准确的,欢迎大神们指点,也欢迎交流。

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,内部的最高部分决定),这个里面就很深奥,让我学习了一番。

让css初学者抓狂的属性float

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

一般情况下一个块级元素,没有设置display:inline-block这个属性,元素也没有设置宽度的话,元素的宽应该是继承父元素的宽度,如果是行内元素,没有设置display:inline-block这个属性,它的宽度和高度是由内容自适应,但是设置高度和宽度是不管用的。

让css初学者抓狂的属性float

让css初学者抓狂的属性float

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

那么下面我们来说浮动(float)

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

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

三、浮动会破坏inline-box,产生两个结果。①(无inlinebox->无line-box->无高度)。②图片与文字无法同行显示。这两个结果恰恰是文字环绕的所必需的。

实践与解释

让css初学者抓狂的属性float

让css初学者抓狂的属性float

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

让css初学者抓狂的属性float

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

Float:left|right;属性与position:absolute属性都具有包裹性,两者都会使元素脱离文档流,但是,与absolute不同的是:float 的元素还会在文档流上占据一个位置。position:absolute的元素是根据最近的非static的父元素定位,如果没有,则根据最初的包含块定义(一般是body),关于float,也会脱离文档流,会被放置在其容器的左边或右边。

关于下列问题

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

2浮动会破坏自己,影响别人

①  
浮动产生bug的原因

②  
清楚浮动的方法与本质

3浮动布局的替代效果

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