css table嵌套内部table不受外部影响_HTML+CSS网页一揽子（4）

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布局中“一马平川”。