CSS重要属性之浮动
基本属性:
float:left;左浮动
float:right;右浮动
float:none;不浮动(一般应用于覆盖既有浮动属性时使用)
clear:both;清除浮动对其他元素带来的影响
应用场景:
(1)网站大的结构布局:
在web发展最初的几年,网页布局都是采用table表格布局实现的,通过table的跨行跨列实现单元格的合并(类似于excle中的单元格操作) ,但随着技术的不断发展及网页布局、CSS属性的不断升级,table布局的局限性(table>tr>td标签嵌套过于复杂且结构不易拆分,不利于搜 索引擎抓取信息)不足以适应布局网页使用,整体的布局逐渐转变为div流体布局。
div流体布局最常用的就是通过浮动实现基本布局(CSS3中有弹性布局也可实现)
如图:
两个元素分别左右浮动便可实现两个元素分别居左居右显示。
注意事项:
①某一个容器中所有元素都进行了浮动属性设置,父元素便会失去宽高,
会对其他布局元素产生影响,(此时便可以对受影响元素使用clear :both属性,清除浮动对自己产生的影响),一般会使用.clearfix定义元素伪类来消除浮动的影响
②按照最标准的用法而言,某一个容器内只要有一个元素进行了浮动,所有元素都应该进行浮动,既:一浮都浮
③设置完浮动的元素脱离了当前的文档流。可以将浮动的元素想想象为一块泡沫,整个网页为一片湖水,此时的浮动元素是“漂泊”在水面 之上的,如果某一个元素高度较高,此时的浮动元素便会“卡在”这里,相当于泡沫卡在了水面的枯树枝上,便影响了整个布局。
④设置浮动的元素没有宽高,自身宽高全由子元素“撑开”
(2)标签元素属性的转化
使用浮动属性可以实现其他元素转换为块级元素(但会类似于内联块元素横向排列),使用display:inline-block转换时,元素间横向排列 会产生间距,设置为浮动后元素间无间距。
浮动属性在web布局使用中占有很大比重,熟练使用浮动及如何最合适的消除浮动的影响才可以在web布局中“一马平川”。