CSS——浮动详解
CSS——浮动详解
开发工具与关键技术:DW/CSS浮动
作者:余智强
撰写时间:2019.1.19
写页面布局的过程中,浮动是大家经常使用的属性,帮我们解决了非常多布局困难。那么下面就来看看浮动究竟有哪些作用。
一般Float(浮动)有inherit(继承)、left(左)、none(没有)、right(右)四种
先设置两个div(块级标签),给予宽和高。正常效果如下:
下面给予div 浮动属性float: left:
这样就能让元素不占一行并排显示了。因为它们如其名浮动(我认为向外浮)起来了,脱离了文档流,不再受行内/块级的限制。
第一点、脱离文档流
图一、
从图中我们能看到两个块级元素重合了。因为我给div-a加了浮动,使得a脱离文档流。剩下b一个人在文档流中,自然就是第一位了。
图二、
图中我们看到span标签因为设置了浮动而有了宽高,脱离了文档流而摆脱了行内/块级的限制。
第二点、浮动元素互相紧贴
图一、
正常浮动情况下他们会齐顶显示(按顺序)
图二、
当在窗口宽度不够时,他们便会换行(按顺序),每行高度由行中最高元素决定
这里我们用d为父元素,a、b、c为子元素,同样是会在容器宽度不够的情况下会将元素挤下来。
第三点、文本包围效果
图三、
这里a浮动虽然遮住了span标签,但span标签里的文字却绕开并包围了a,
这在我们进行图文表达时会很有用。
本文到此结束,如有错漏,欢迎指出。