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