下面是小编为大家精心整理的有关浮动 清除浮动的影响的方法文章,供大家阅读参考。
关于浮动
什么是CSS Float
float 是css 的浮动属性。在传统的印刷布局中，文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。在网页设计中，应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分。这与使用绝对定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除了，就像印刷布局里面的文本框被设置为无视页面环绕一样。绝对定位的元素不会影响其它元素，其它元素也不会影响它，无论它是否和其它元素挨着。
浮动的写法
#sidebox { float: right; }
float属性有四个可用的值：left 和right 分别浮动元素到各自的方向，none (默认的) 使元素不浮动，Inherit 将会从父级元素获取float值。
注：浮动就会脱离普通流的显示结构，所谓普通流简单的说就是正常情况下区块标签按照顺序往下逐个排列。Float的用处
除了简单的在图片周围包围文字，浮动可用于创建全部网页布局
图片大小的时候，盒子里面的文字也将自动调整位置，例如：
清除Float
清除(clear)是浮动(float)的相关属性.一个设置了清除Float的元素不会如浮动所设置的一样，向上移动到Float元素的边界，而是会忽视浮动向下移动。
清除浮动的写法#footer { clear: both; }
关于清除浮动将给大家做简单演示。
清除(clear)也有4个可能值。最常用的是both，清楚左右两边的浮动。left 和right 只能清楚一个方向的浮动。none 是默认值，只在需要移除已指定的清除值时用到。inherit 应该时第五个值，(不过很奇怪的是IE 不支持)。只清除左边或右边的浮动，实际中很少见，不过肯定是有他们的用处的。
例如：
塌陷现象：
使用浮动(float)的一个比较疑惑的事情是他们怎么影响包含他们的父元素的。如果父元素只包含浮动元素，那么它的高度就会塌缩为零。这是一个很重要的问题。
清除浮动的技术
如果你很明确的知道接下来的元素将会是什么，可以使用clear:both; 来清除浮动。这个方法很不错，它不需要hack，不添加额外的元素也使得它有良好的语义性。当然事情并不是都可以这样解决的，工具箱中还是需要另外几个清除浮动的工具。
●空div方法
可以写一个div然后通过控制这个div的clear属性来达到清除浮动的效果。
●overflow 方法
在父元素上设置overflow 这个css 属性。如果父元素的这个属性设置为auto 或者hidden，
（在使用overflow 方法清除浮动的时候切记不要出现高度值）否则将会覆盖住内容或者触发了不需要的滚动条。
关于overflow属性：
根据CSS的盒模型概念，页面中的每个元素，都是一个矩形的盒子。这些盒子的大小、位置和行为都可以用CSS 来控制。如果说你没有设置一个盒子的高度，该盒子的高度将会根据它容纳内容的需要而增长。但是当你给一个盒子指定了一个高度或宽度而里面的内容超出的时候会发生什么？这就是该添加CSS的overflow属性的时候了，它允许你设定该种情况下如何处理。overflow属性就是专门用来处理这种溢出问题的：
visible :默认值。不剪切内容也不添加滚动条。
auto :在必需时对象内容才会被裁切或显示滚动条
hidden :不显示超过对象尺寸的内容
scroll :总是显示滚动条。
浮动中出现的问题以及技巧：
如果我们采用浮动，那么需要注意的是不同浏览器之间出现的兼容性问题。
比如：在IE6中元素浮动的情况下，出现margin属性，那么此时会出现一个bug，我们称之为IE双边距，同样的代码出现的效果如图：
处理这种兼容性bug的时候我们只需要给同时拥有浮动和横向外间距的元素加上display:inline就可以修复这个效果。
关于浮动还有几个小技巧：
1.标题栏中的更多
这种形式相信大家都经常见到，那么这种更多居右是如何实现的呢？
通过简单的分析，可以得知更多两个字可以通过右浮动来达到效果（定义h标签的高度行高以及padding和背景图片等等）。那么，预期结构是这样的
经过测试发现这种方法是存在兼容性问题的。那么怎么处理呢？
我们可以换一种思路：
这样一来，先出现的a标签进行了右浮动，那么他就脱离了普通流。也就不会占用后面最新公告文字的区域了。
还有一种方法，我们也可以将最新公告四个字进行左浮动，那么这时最新公告文字和更多链接都脱离了普通流，就会在同一行显示了。
这种方法也可以实现我们想要的预期效果，但是在结构上多了一个标签。
其他的方法以及技巧我们在后面的学习实践中再给大家慢慢介绍。
相关热词搜索： 清除浮动的影响的方法 浮动 标签 XXX