float-left,float-right
点评：在CSS中，布局经常使用floating，即floating: left或floating: right，这是经常见到的。简单来说，前者是左浮动(浮动到非浮动元素的左前方，如果所有浮动元素都浮动，就浮动浮动：按流向从左到右，放不下就换行)，后者是右浮动(向右浮动)。但仅此而已吗？-
不要！
请注意以下几点：
1.浮动元素会自动设置为块级元素，相当于为元素设置display:block(块级元素可以设置宽度和高度，行内元素不能设置)。
2.浮动元素后面非浮动元素的显示。
3.具有相同浮动方向的多个元素以流模式排列。这时候要注意浮动元素的高度。
4.子元素都是浮动元素的元素的高适应性问题。
下面详细分析四个问题。
1.浮动元素自动变成块级元素
首先，我们来说说块级元素和行内元素的区别。简单来说，块级元素占一行，宽度、高度、边距都可以设置。行内元素不占一行，设置宽度、高度、行距都不行。常见的块级元素有h1~h6、p、div、ul、table，常见的行内元素有span、a、input、select等。
示例代码：
复制代码如下：
差异
span style= float:left；150px高度：150px保证金：5px填充：5px
边框：纯色1px红色；背景色：橄榄色；浮动元素跨度/跨度
/div
差异
span style= 150px。高度：150px保证金：5px填充：5px边框：纯色1px红色；
背景色：橄榄色；浮动元素跨度/跨度
/div
效果如下：
第二，浮动元素后非浮动元素的问题
如果浮动元素后面的元素是非浮动内联元素，并且由于定位而重叠，则内联元素的边框、背景和内容显示在浮动元素的“上方”；如果非浮动块级元素跟随浮动元素并在定位后重叠，则块级元素的边框和背景显示在浮动元素的“下方”，只有内容显示在浮动元素的“下方”。
示例代码如下：
复制代码如下：
差异
div style= float:left；250px高度：250px边框：纯色1px Aqua背景色：灰色；
边距：10px 0 0 10px
浮动分度/分度
差异
浮动元素后的DIV /div
跨度
浮动元素后的Span /span
/div
效果图如下：
从图中可以看出，浮动div后面的div的背景和边框被压下，但内容没有，整个span显示在浮动div的上方。
但是，这种效果在ie6中很奇怪，如图：
浮动元素不按非浮动div，但按span。
第三，同方向多个浮动元素的高度不一致。
如果同一个方向的多个浮动元素高度不一致，可能会得到意想不到的结果，与想要的布局相差很大。同方向的多个浮动元素一般按照流布局进行布局，一行满了就自动换行，类似于下面的效果：
但是，如果每个浮动元素的高度不一致，效果可能如下所示：
令人惊讶的是，当它主要排列到元素7时，一行无法再显示，因此必须换行。但是，这里的换行不是从行头开始，而是从元素5开始，因为元素5比元素6高得多。
第四，子元素都是浮动元素，适应性强。
因为元素浮动在文档流之外，所以父元素不能适应元素。有两种方法可以解决这个问题。第一种方法是添加：
分区/分区
第二种方法是使用万能清除：
复制代码如下：clearfix:之后
{
可见性：隐藏；
显示：块；
字体大小：0；
内容：“.”；
明确：两者都有；
高度：0；
}
* html。清除浮动
{
缩放：1；
}
*:第一个子html。清除浮动
{
缩放：1；
}
然后添加你需要适应的元素。
你真的明白清楚：两者都是吗？
在开发中，从美工MM给你的Html代码来看，你肯定能经常读到类似“div /div”这样的代码，但你真的能理解它是用来做什么的吗？
比如：
复制代码如下：
差异
分区测试分区/分区
分区/分区
/div
你可以把这部分代码放到一个HTML页面里看看效果，然后去掉“div /div”看看效果，你就知道这句话的作用了。
如图所示：
(1)明确：两者：
(2)不清楚：两者都有
看，应该是一目了然：原清：两者兼而有之；其实就是通过清除float来打开外层div，所以有时候，我们把内层div设置成float之后，会发现外层div的背景并没有显示出来。原因是外div没有打开，太小，可见背景仅限于一行。
但这是最好的方法吗？
我这么说，答案当然不是。可以通过黑客攻击来实现：
复制代码如下：
风格。clearfix:在{
可见性：隐藏；
显示：块；
字体大小：0；
内容：“.”；
明确：两者都有；
高度：0；
}
* html。clear fix { zoom:1；}
*:第一个子html。clear fix { zoom:1；}
/风格
差异
差异
测试部门/部门
/div
看完解决方案，我们来看看里面的原理：
(1)首先利用伪类：after来兼容FF、Chrome等支持标准的浏览器。
:不支持伪类IE之后。它用于将对象后的内容集与内容属性一起使用，例如：
答：{内容：(链接)后；}
这个CSS将在A标签中的文本后面添加链接文本。
(2)使用只有IE6知道的选择器“* html”来设置缩放属性“zoom:1；”实现IE6兼容性。
(3)设置缩放属性“缩放：1；”通过使用“*:first-child html”，一个只有IE7知道的选择器。实现IE7兼容性。
详细的参考资料来源：http://www..net/css/33740.html
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。