CSS浮动(float,clear)浅显讲授
很早之前就打仗过CSS,但对浮动一向很是利诱,能够是本身懂得才能差,也能够是没能碰到一篇浅显的教程。
前些天小菜终究搞懂了浮动的根基道理,迫不迭待的分享给大师。
写在后面的话:
因为CSS内容比拟多,不精神从头到尾讲一遍,只能有针对性的讲授。若是读者懂得CSS盒子模子,但对浮动不懂得,那末这篇文章能够赞助你。本文仅仅是入门教程,不妥的地方请体谅!
本文以div元素规划为例。
教程起头:
起首要晓得,div是块级元素,在页面中独有一行,自上而下摆列,也便是传说中的流。以下图:
能够看出,即便div1的宽度很小,页面中一行能够容下div1和div2,div2也不会排在div1后边,因为div元素是独有一行的。
注重,以上这些实际,是指规范流中的div。
不管何等庞杂的规划,其根基动身点均是:“若安在一行显现多个div元素”。
明显规范流已没法知足需要,这就要用到浮动。
浮动能够懂得为让某个div元素离开规范流,漂泊在规范流之上,和规范流不是一个条理。
比方,假定上图中的div2浮动,那末它将离开规范流,但div1、div3、div4依然在规范流傍边,以是div3会主动向上挪动,占有div2的地位,从头构成一个流。如图:
从图中能够看出,因为对div2设置浮动,是以它不再属于规范流,div3主动上移顶替div2的地位,div1、div3、div4顺次摆列,成为一个新的流。又因为浮动是漂泊在规范流之上的,是以div2盖住了一局部div3,div3看起来变“矮”了。
这里div2用的是左浮动(float:left;),能够懂得为漂泊起来后靠左摆列,右浮动(float:right;)固然便是靠右摆列。这里的靠左、靠右是说页面的左、右边缘。
若是咱们把div2接纳右浮动,会是以下结果:
此时div2靠页面右边缘摆列,不再遮挡div3,读者能够清楚的看到上面所讲的div1、div3、div4构成的流。
今朝为止咱们只浮动了一个div元素,多个呢?上面咱们把div2和div3都加上左浮动,结果如图:
同理,因为div2、div3浮动,它们不再属于规范流,是以div4会主动上移,与div1构成一个“新”规范流,而浮动是漂泊在规范流之上,是以div2又盖住了div4。
当同时对div2、div3设置浮动以后,div3会跟从在div2以后,不晓得读者有不发明,一向到此刻,div2在每一个例子中都是浮动的,但并不跟从到div1以后。是以,咱们能够得出一个主要论断:
假设某个div元素A是浮动的,若是A元素上一个元素也是浮动的,那末A元素会跟从在上一个元素的后边(若是一行放不下这两个元素,那末A元素会被挤到下一行);若是A元素上一个元素是规范流中的元素,那末A的绝对垂直地位不会转变,也便是说A的顶部老是和上一个元素的底部对齐。
div的挨次是HTML代码中div的挨次决议的。接近页面边缘的一端是前,阔别页面边缘的一端是后。
相干浏览
栏目导航 |
- 05-10帝国7.2搜刮模板撑持调
- 04-18襄阳友达印务无限公司
- 04-18襄阳市盛特幼儿园
- 04-01织梦点击次数的挪用和修
- 03-30织梦dede若何去除底部Po
- 03-29百度快照消逝对SEO影响
- 03-19让帝国CMS留言板撑持调
- 03-04SEO经常使用到的搜刮引擎命
- 11-09帝国CMS 7.2版本进级功
- 11-04若何晋升微信公家号的图