浮动布局详解

首先要理解浮动的原理(机制)：浮动的设计初衷是为了设计文字环绕效果

 

紧接着理清浮动造成的影响：父级元素高度塌陷(包裹效应)，即父级元素没有设宽高，宽高由子级元素撑开，当子级元素浮动后，父级的宽高为0。在HTML里有一个元素浮动势必影响别的元素。

 

在IE浏览器下造成的问题->引申兼容IE浏览器的hack写法(面试考点)

 

_针对IE6  如写法width:100px; 则ie6要写成_width:100px;

*针对（IE6/7） 写法*width

 

 \0 针对IE8,9,10,11  写法width：400px\0

 \9针对IE6,7,8,9,10,11 写法width:400\9

 

如何清除浮动的影响（列举常用的方法）【考点】

 

在想用什么办法清除浮动的影响之前，首先要考虑要解决的是浮动造成什么样的影响。

 

清除浮动中一个比较重要目的，就是解决父元素高度塌陷的问题。

 

清除浮动造成的影响之二：解决浮动元素对非浮动元素造成的影响。

 

01.overflow+zoom方法： 

 

在IE6中还需要触发haslayout

 

值可以是hidden，也可以是scroll（比较纠结，会造成滚动条）

.fix{

     overflow:hidden;

     zoom:1;     /*兼容IE6*/

}

 

此方法优点在于代码简洁，涵盖所有浏览器。

 

缺点：overflow:hidden是个小炸弹，里面的元素要是想来个margin负值或是负的绝对定位，会导致元素直接被裁掉。

 

02.伪元素after方法：

      .clearfix {

          zoom:1;

         }

     .clearfix2:after {
               content: "\200B";      /*空的空格元素*/
               display: block; /*设置为块元素*/
               height: 0; /*设置宽度为0，以免影响别的元素正常表现*/
               clear: both; /*当然少不了清浮动*/
          }

 

只能用在包含浮动子元素的父级元素上,也就是所谓的闭合元素。通用性比较强。

 

由于IE6/7不支持该属性，需要触发haslayout,即zoom:1;

 

缺点：使用不当会造成无用代码过多。

 

03.空标签方法：

 

就是直接一个<div style="clear:both;"></div>当作最后一个字标签放到父标签哪儿。

 

优点：兼容性好、使用方便。

 

缺点：造成一个巨大的浪费，浪费了一个空标签，而且复用性差，只能使用一次，有违结构与表现分离。

 

04.父元素一起浮动：

 

此方法，由于受浮动后的特性(脱离文档流)影响，父元素的宽高等于子元素的宽高，不在等于块元素默认宽，在各版本的浏览器下均表现一样。

 

缺点是，父元素跟着一起浮动后势必影响别的元素。

 

还有一些不常用的方法：

 

05.position方法，代码如下：

 

position-clear {

     position：absolute；

}

 

缺点太过明显，绝对定位后会脱离文档流

 

06.display：inline-block方法，代码如下：

 

display-clear {

     display：inline-block;

}

 

浮动布局的好处

 

1. 浮动可以使元素block块状化（也就是行内元素浮动后可以设置宽高）

 

2.可以使块元素同行排列

 

IE6下浮动元素造成双边距的成因与解决方法

 

成因：设置浮动块元素的左右外边距和左右内边距会加倍

 

解决方法：

 

1.给浮动块元素加display-inline属性。

 

2.在浮动元素外面嵌套一个div，由这个div进行浮动，里面内容设置外边距和内边距

 

3.position定位布局

 

说到position定位，那首先我们需要明白，position在我们布局中处于一个什么样的位置。

 

通常CSS+DIV布局当中，我们最常见的就是浮动布局和定位布局。平时我们最常见的就是浮动布局，当在页面当中出现多个页面元素层叠状态时，我们会考虑用position定位布局。

 

position属性的取值：static、absolute、relative、fixed、inherit