暑假网页学习1（浮动问题）

最新推荐文章于 2024-06-02 18:15:35 发布

jn_8316

最新推荐文章于 2024-06-02 18:15:35 发布

阅读量228

点赞数

分类专栏：网页设计文章标签：网页浮动

本文链接：https://blog.csdn.net/jn_8316/article/details/52016339

版权

网页设计专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<span style="font-size:18px;">一个简单的框架含浮动</span>

<<span style="font-size:18px;">!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>第一课</title>
<style type="text/css">
*{
	margin:0;
	padding:0;
}
.header{
	width:100%;
	height:50px;
	background:#ccc;
}
.header h1{
	text-align:center;
	/*竖直居中文字*/
	height:50px;
	line-height:50px;
}
.contain{
	/*容器水平居中*/
	width:80%;
	margin:0 auto;
	height:400px;
	background:red;
}
.first,.second,.third{
	width:30%;
	height:350px;
	background:blue;
	float:left;
	margin:25px 1% 0;
}
.first{
	margin-left:3%;
}
.footer{
	
	width:100%;
	height:50px;
	background:	#ff1;
}
</style>
</head>

<body>
	<header class="header">
    	<h1>头部部分</h1>
    </header>
    <div class="contain">
    	<div class="first">1</div>
        <div class="second">2</div>
        <div class="third">3</div>
    </div>
    <footer class="footer"></footer>
</body>
</html></span>

浮动常见问题：

如果不定义中间的容器contain的高度，那么footer就会自动浮动到header的下面，而我们在coontain中定义的三个浮动就会浮在上层，此时页面会出现分层，分成两层，但是由于之前给三个浮动设置了外边距因此上面会浮到头部部分的下面，之间的距离就是外边距，出现这种分层问题，而且页脚浮上去的原因是contain中三个东西定义成浮动，因此一旦高度没有了，contain高度就为0，那么解决方法可以加上clear:both,或者定义一个<div class="clear"></div>，.clear{ clear:both}，这个定义的位置是有区别的，在contain中定义，就可以将contain的背景颜色显示出来，因为它属于contain中，而且它位于的位置是contain的底部，因此contain就会被它撑开，如果在contain外面，就会没有背景。这两种方法都是将页脚恢复到contain下面的。如果它的宽度是用百分比表示，那么他就是自适应，另一种方法就是设置宽度的最小值，它不会小于它，可以大于它。