css中浮动的影响以及去除浮动的方法详解

第一次电话面试，面试哥哥问我你都知道哪些去除浮动的办法？我是这样回答的“有两种方法，一种是在需要去除浮动的元素上使用“clear：both”；另一种是在浮动元素的父元素使用"overflow:hidden"。说实话当时说第二种方法时，我并没有实践过，只是看过，然后含含糊糊的说了。第二次面试，也问到了这个问题，但是由于第一次电面的教训，我回去就看了看书，《css设计指南》里面有专门的一章讲去除浮动的几种方法，可是时间紧，我只是看了书一遍，并没有用手敲过。所以问的时候，我就1234罗列啦一下。1、clear:both；2、overflow:hidden;3、浮动父元素4、在浮动元素的后面添加一个去除浮动的元素。后来面试姐姐，就又补充道，“你看看这个水平导航栏，肯定是用浮动实现的，那么他肯定不能用overflow:hidden;这个，应为万一这个当行栏有子菜单，那不就看不见了么,，怎么解决呢”我当时回答的是在浮动元素的后面添加一个去除浮动的元素，那位面试姐姐也没有说对错，到底是对是错，还是需要自己做一个导航，就知道了。

之前在这里写过一篇关于浮动原理的笔记，今天呢，我就再写一篇笔记，有关去除浮动，内容来自于《css设计指南》这本书。

• 浮动带来的影响

• 现代浏览器的表现
  放置两个相邻的行内元素，如果设置第二个行内元素为左浮动，那么该行内元素被设置浮动后，其display会被修改为block；但是其大小会根据设置或其内容的大小进行表现。并不会占据整行的空间，其旁边的行内元素，就会在这一行的浮动元素后面，并不会与浮动元素平起平坐。
  但是如果其旁边是设定了宽度的行内块级元素，那么这个行内块级元素也会在浮动元素后面。
  如果其旁边是块级元素，那么这个块级元素会占据该设置浮动的行内元素的空间。
  如果说原因，我也说不上来。

• 在IE7及以前版本的ie浏览器
  旁边的行内元素会在浮动元素另起一行的下面，是不是更奇怪。

• 块级元素浮动后
  浏览器会收回块级元素原来占据的空间，原来紧跟其后的元素就会在空间允许的情况下，向上提升到与浮动元素平起平坐。而设置浮动的块级元素本身就保持原来的位置，默默地看着他影响的元素改变。
  该浮动元素的父元素的边框也会收缩至父元素内没有设置浮动的子元素。

  立即学习“前端免费学习笔记（深入）”；

• 行内元素浮动后
  其实这个貌似在我目前做的练习上没有看过有这样进行设置的，但是他确实也带来了不一样的体验。

至于行内元素的浮动，我在参考其他网站源代码时，并没有遇到过，所以我就先放一放。

• 接下来就是围住浮动元素的几种方法，及各个方法的适应场合。

• 简单的在html标记中添加一个子元素，并给他应用clear属性。

    
  
        @@##@@
        
  it s fun to float
  
  							
  
  								
  								
  
  									亿众购物系统
  									
  一套设计完善、高效的web商城解决方案，独有SQL注入防范、对非法操作者锁定IP及记录功能，完整详细的记录了非法操作情况，管理员可以随时查看网站安全日志以及解除系统自动锁定的IP等前台简介：　　1）系统为会员制购物，无限会员级别。　　2）会员自动升级、相应级别所享有的折扣不同。　　3）产品可在缺货时自动隐藏。　　4）自动统计所有分类中商品数量，并在商品分类后面显示。　　5）邮件列表功能，可在线订阅
  								
  								下载 
  							
  						
        
  
    
    

• 但是如果，我们特别不想添加这个纯表现元素，可以采用css来添加这个清除元素。为section添加一个类：.clearfix

  .clearfix:after{
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;}

• 方法一：为父元素添加：overflow:hidden
  这种方法强制父元素包围浮动的子元素。
  实际上：overflow：hidden声明的真正用途是防止包含元素被超大的内容撑大。应用overflow：hidden之后，包含元素依然保持其设定的宽度及高度，而超大的字内容会被容器切掉。除此之外，overflow:hidden还有一个作用，即它能可靠的迫使父元素包含其浮动的子元素。
  但是，带来的后果就是字内容一旦超出设定宽度就会看不见。

• 方法二：同时浮动父元素
  其实这个对于整个网站布局并不算的上是清楚浮动，只是使得父元素包围住了浮动的子元素，但是父元素浮动虽然包围住了浮动子元素，但却没能解决父元素自身的浮动对整个网站布局的影响，我看到有些网站的源码还是会喜欢用这种方法，然后再在这个浮动父元素的外面再包围一个父元素，并为他设置宽度，高度，以保证不影响网页中其他内容的布局。

• 方法三：添加非浮动的清除元素
  就是给父元素的最后添加一个非浮动的子元素，然后清除该子元素的浮动。
  然而在包含元素的最后添加子元素作为清除元素的方式有两种。

这三种方法都利用父元素进而实现，围住浮动的子元素。
分析一下这三个方法：
1、不能在下拉菜单的顶级元素上应用overflow:hidden；否则作为其子元素的下拉菜单就不会显示啦。
2、不能对已经自动外边距居中的元素使用浮动父元素技术，否则他就不会再居中。
但是如果某些场合没有父元素时怎么办？
我肯定会说，再加个呗，由不费事，但是这样会增加遍历深度，
如果某个元素既希望自身受到浮动元素影响，又不希望他之后的元素受到这个浮动元素影响，可以在这个元素的内部添加一个块级元素，然后再为这个块级元素清除浮动，还有一点需要注意，这个元素千万不要自己多余设置个高度，否则效果不会显现出来，希望看到这篇文章的人可亲测。

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

3. php.cn独孤九贱（2）－css视频教程