清除浮动方法、margin的坍塌现象以及浏览器的某些兼容问题

清除浮动

1）加高法：

浮动的元素，只能被有高度的盒子关住。也就是说，如果盒子内部有浮动，这个盒子有高，那么妥妥的，浮动不会互相影响。但是，工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。

 <div>   → 设置height
        <p></p>
        <p></p>
        <p></p>
</div>  
<div>   → 设置height
        <p></p>
        <p></p>
        <p></p>
</div>

/*清除浮动方法：加高，这样两个盒子互不影响*/
div {
    height: 800px;
}
p {
    float: left;
}

2) clear:both;法

最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。

<div>
    <p></p>
    <p></p>
    <p></p>
</div>  
<div>   → clear:both;
    <p></p>
    <p></p>
    <p></p>
</div>

浮动确实被清除了，不会互相影响了。
问题来了！！！
就是margin失效。两个div之间，就没有任何的间隙了。

3.1）隔墙法：

在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。墙用自己的身体当做了间隙。

该墙必须要有clear: both；

<div>
    <p></p>
    <p></p>
    <p></p>
</div>
<div class="cl h10"></div>  
 <div>
    <p></p>
    <p></p>
    <p></p>
 </div>

.h10 {
    height: 1px;
}
.cl {
    clear: both;
}

由该种方法发现第一个div，没有高度。因此引出方法4.

3.2）内墙法：

<div>
    <p></p>
    <p></p>
    <p></p>
    <div class="cl h10"></div>
</div>
<div>
    <p></p>
    <p></p>
    <p></p>
</div>

内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。

4）overflow:hidden

这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。

我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。

注意： overflow:hidden方法能够让margin生效。

<div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta ea facere fuga Ab est id porro reprehenderit?
    </p>
    <p>
        iusto magni praesentium quidem quo similique. Accusamus, vero!
    </p>
    <p>quis sequi veritatis!</p>
</div>
<div>
    <p>Lorem eveniet!</p>
    <p>Lorem ipsum psa officiis, quod reiciendis sed vel.</p>
    <p>Lorem  unde voluptas.</p>
</div>

div {
/*使用overflow方法，会使得div有高度，从而清除浮动*/
    overflow: hidden;
}
p {
    float: left;
    width: 200px;
    height: 200px;
}

margin的坍塌现象

在标准文档流中，竖直方向的margin不叠加，以比较大的为准
但是：
不在标准流中，比如都浮动了，那么就没有坍塌现象

    <div class='box1'></div>
    <div class='box2'></div>

.box1 {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin-bottom: 20px;
    }
    .box2 {
      width: 100px;
      height: 100px;
      background-color: red;
      margin-top: 50px;
    }

由上述代码所示：
两个盒子，box1，box2。box1的下margin为20px，box2的上margin为50px。
而坍塌现象导致：box1和box2之间的间距只有50px
这里写图片描述

由margin的坍塌现象得：

善于使用父亲的padding，而不是儿子的margin

例如：

<div>
    <p></p>
</div>

p {
    margin-top: 10px;
}

情况1 ：当父元素没有设置border属性
由于父元素没有边框，会使得父元素和子元素一起下去
情况2 ：当父元素设置了border属性
父元素和子元素垂直方向上有10px的距离

浏览器兼容问题

1）（微型盒子）IE6，不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都是大的

解决办法：将盒子的字号，设置小（小于盒子的高），比如0px。

 height: 4px;
_font-size: 0px;

IE6留了一个后门，就是只要给css属性之前，加上下划线，这个属性就是IE6认识的专有属性。

  /*比如：*/
_background-color: green;

2) IE6不支持用overflow:hidden;来清除浮动的

解决办法：以毒攻毒。追加一条 _zoom:1;

/*完整写法：*/
overflow: hidden;
_zoom:1;

实际上，_zoom:1;是触发浏览器hasLayout机制。

注意： overflow:hidden;的本意，就是溢出盒子的border的东西隐藏，溢出功能IE6是兼容的。不兼容的是利用overflow:hidden;清除浮动。

3) 选择器的兼容问题

下列都是IE6兼容的选择器：

p                标签选择器
\#box            id选择器
.spec            类选择器
div.box          交集选择家
div .box         后代选择器
div , .box       并集选择器
*                全局选择器

2.下列都是IE7开始兼容：

div>p           子代选择器
div+p           兄弟选择器

3.下列都是IE8开始兼容：

伪类选择器:
divp:first-child  
div p:last-child
div p:nth-child(2)

4） margin的IE6兼容问题

当出现连续浮动的元素，携带和浮动方向相同的margin时，队首的元素，会双倍的margin

<a href="#">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
<a href="#">a5</a>
<a href="#">a6</a>

a {
    /*所有元素都这样浮动，并带了40px的左margin*/
    float: left;
    margin-right: 40px;
    /*这样使得第一个元素带了80px的左margin*/
}

解决方案：给队首元素一半的左margin（即：给第一个a标签一半的左margin）

  _margin-left: 20px;/*下划线只有IE6识别*/

5）固定定位（IE6不兼容）

position: fixed;