目录
1:元素浮动之后,能设置宽度的话就给元素加宽度,如果需要宽度是内容撑开,就给它里边的块元素加上浮动;
2:第一块元素浮动,第二块元素加nargin值等于第一块元素,在IE6下会有间隙问题;
3:IE6下子元素超出父级宽高,会吧父级的宽高撑开
4:p包含块元素嵌套规则
1:元素浮动之后,能设置宽度的话就给元素加宽度, 如果需要宽度是内容撑开,就给它里边的块元素加上浮动;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width:400px;
border:1px solid black;
overflow:hidden;
/*
overflow:hidden是用最简洁最方便的清除浮动的方法,
但不是最好的,清除浮动还是要用伪类的方法好一些
*/
}
.left{
float:left;
background:orange;
}
.right{
float:right;
background:yellow;
}
a{
display:block;
margin:0;
}
h2{
margin:0;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<h2>左边</h2>
</div>
<div class="right">
<a href="javascript:;">右边</a>
</div>
</div>
</body>
</html>
标准浏览器下是这样的,IE6下也是这样的
问题是如果给A元素与h2元素加上高度
在IE6下变成这样
代码如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:400px;
border:1px solid black;
overflow:hidden;
}
.left{
float:left;
background:orange;
}
.right{
float:right;
background:yellow;
}
a{
display:block;
margin:0;
height:30px;
}
h2{
margin:0;
height:30px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<h2>左边</h2>
</div>
<div class="right">
<a href="javascript:;">右边</a>
</div>
</div>
</body>
</html>
height:30px加上这一行后IE6下出现问题,需要自适应的元素,一左一右就出现问题了,标签元素的特征与浮动元素的特征就冲突了。
为什么在IE6下浮动就没有生效?没有靠H2,A标签撑开元素呢?
分析一下,浮动属性是加给了div,但是h2是块元素,A标签是定义成了dispaly:block块元素默认就撑满一行的。
解决方案1:
IE6下让谁去浮动,让谁去自适应,就把浮动加给谁。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:400px;
border:1px solid black;
overflow:hidden;
}
.left{
float:left;
background:orange;
}
.right{
float:right;
background:yellow;
}
a{
display:block;
float:left;
margin:0;
height:30px;
}
h2{
float:left;
margin:0;
height:30px;
}
</style>
<!--
加上这一行后IE6下出现问题
需要自适应的元素,一左一右就出现问题了,标签元素的特征与浮动元素的特征就冲突了
为什么在IE6下浮动就没有生效?没有靠H2,A标签撑开元素呢?
分析一下,浮动属性是加给了div,但是h2是块元素A标签是定义成了dispaly:block,块元素默认就撑满一行的。
解决方案01
IE6下让谁去浮动,让谁去自适应,就把浮动加给谁。
-->
</head>
<body>
<div class="box">
<div class="left">
<h2>左边</h2>
</div>
<div class="right">
<a href="javascript:;">右边</a>
</div>
</div>
</body>
</html>
解决方案02
IE6下给A标签,H2标签加上宽度
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:400px;
border:1px solid black;
overflow:hidden;
}
.left{
float:left;
background:orange;
}
.right{
float:right;
background:yellow;
}
a{
display:block;
margin:0;
height:30px;
width:50px;
}
h2{
margin:0;
height:30px;
width:50px;
}
</style>
<!--
解决方案02
IE6下给A标签,H2标签加上宽度
-->
</head>
<body>
<div class="box">
<div class="left">
<h2>左边</h2>
</div>
<div class="right">
<a href="javascript:;">右边</a>
</div>
</div>
</body>
</html>