<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
span{
width: 400px;
height: 200px;
border: 1px solid pink;
}
#inline img{
width: 100px;
vertical-align: top;/*vertical-align 属性设置元素的垂直对齐方式 是图片对齐的方式*/
}
/* #float{
float:right ;
}
*/
[class="nav"]{
border: 1px solid red;
height: 50px;
}
#left, #middle, #right{
float: left;
width: 33%;
}
#foot{
clear: left;
}
</style>
<!--这个例子里面有个问题 第二个span做了浮动后 下移了1个像素-->
</head>
<body>
<div class="container">
<span id="inline">行内流动元素
<img src="image/03-cart01.gif" alt="">
</span>
<span id="float">行内浮动元素</span>
</div>
<div class="nav" id="header">头部信息</div>
<div class="nav" id="left">左边信息</div>
<div class="nav" id="middle">中间信息</div>
<div class="nav" id="right">右边信息</div>
<div class="nav" id="foot">底部信息</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wrap{
border: 2px solid red;
float: left;
margin: 4px;
width: 300px;
width: 400px;
}
.sub{
width: 200px;
height: 200px;
float: left;
border: 1px solid pink;
}
#contain{
background: red;
clear: left;
}
span{
float: left;
width: 200px;
height: 100px;
}
#span1{
border: 1px solid black;
}
#span2{
border: 1px solid pink;
}
</style>
</head>
<body>
<!--父级元素自适吟了子级元素的高度和宽度-->
<div class="wrap">
<div class="sub"></div>
</div>
<div class="wrap">
<div class="sub"></div>
</div>
<!--如果把浮动元素嵌入流动元素中 则父元素不能够自适应子浮动元素的宽度和高度
下面的div的宽度和高度 背景都没显示 而是根据自身的属性以独立显示
解决方案 在最后加一个清楚元素 强行撑开包含元素-->
<div id="contain">
<span id="span1">span元素的浮动</span>
<span id="span2">span元素的浮动</span>
<div>--如果把浮动元素嵌入流动元素中 则父元素不能够自适应子浮动元素的宽度和高度
下面的div的宽度和高度 背景都没显示 而是根据自身的属性以独立显示
解决方案 在最后加一个清楚元素 强行撑开包含元素</div>
<div style="clear: left"></div><!--最后一行的添加效果 现在div的效果显示了 -->
</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
