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，

这在我们进行图文表达时会很有用。

本文到此结束，如有错漏，欢迎指出。