清除浮动
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;