您的位置：首页 > Web前端 > HTML5

html5和css篇有关浮动以及如何清除浮动

2016-03-15 22:52 561 查看

今天温习了一下写网页的骨架和血肉，html5和css，因为要备战找实习，之前看了一下各大公司笔试题，觉得虽然可以敲出来但是还是不够熟悉，而且考试内容好基础，好全面，所以每天还是记录一下。

其实大一上学期就开始接触网页的制作，但是到如今才对它有个深刻清晰的了解，所谓厚积薄发，大概可以领略一点点。

言归正传，今天主要想说一下，div层浮动的问题。

回忆一下，html的块元素主要有哪些：div ul ol p hr h1-h6 ,这是今天用到的，这些块元素都会独占一行，块元素会按照先后顺序从新的一行开始往下排，那么怎样才能让div层能在同一行呢？

拿今天的我练习的例子讲：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>湘潭大学艺术学院</title>

<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>

<div id="footer">
<div class="foot">
<div class="first">
<a>链接 Links</a>

<div>
<ul>
<li>湘潭大学艺术学院OLO教学平台</li>
<li>湘潭大学教务管理系统</li>
<li>中国大学生在线</li>
</ul>
</div>
<div>
<ul>
<li>湘潭大学</li>
<li>湘潭大学图书馆</li>
<li>湖南省设计家协会</li>
</ul>
</div>
<div>
<ul>
<li>湘潭大学学生工作处</li>
<li>国家教育部</li>
<li>中国视觉联盟</li>
</ul>
</div>
</div>

<div class="second">
<hr>
<a>联系 Contact</a>
<ul>
<li>XTU-ART@163.com</li>
<li>电话 +86 0730-65866245</li>
<li>传真 +86 0731-58293856</li>
<li>中国湖南省湘潭市雨湖区湘</li>
<li>潭大学艺术学院</li>
</ul>

</div>

</div>
</div>

</body>
</html>

css如下：

#footer{
background-color: darkorange;
overflow: hidden;
clear: both;

}
.foot{
width: 1200px;
margin: 0 auto;

}
.foot ul{
margin-left: 130px;
list-style-type:none;
float: left;
}
.second{
clear: both;
}

.second a{
margin-left: -350px;
}

我想要.first里的div在一行，所以对于所有的ul加了float:left，但因此就要在footer里加：clear:both和overflow，来清除浮动，紧随其后的元素也要造成影响，因为都是向左浮动，可能没有占满一行。
总结一下清除浮动的方法：

1、给其父级也加浮动，但当父级css：margin 0 auto时，父级div就不会居中了；

2、给父级加display:inline-block,同样父级css为margin:0 atuo时，也不会居中，但是IE6和IE7会居中；

3、在浮动元素下加<div class="clear"></div>,其中clear的css样式为：.clear{ height:0px;font-size:0;clear:both;}

4、在浮动元素下加<br clear="all"/>

5、给浮动元素的父级加.clear{zoom:1;} .clear:after{content:""; display:block;clear:both;}

6、给浮动元素的父级加overflow:auto

总结到第六条我发现我之前的代码就不用写那么麻烦，直接在.foot里写overflow:auto，就搞定了！

附上基本完工的静态网页，明后两天更新动态的。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>湘潭大学艺术学院</title>

<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="header">
<div>
<div class="img1"><img src="img/logo.png"></div>
<div class="daohang">
<span>关于我们</span>
<span>专业设置</span>
<span>教学科研</span>
<span>作品展示</span>
<span>展览讲座</span>
<span>招生就业</span>
</div>
<div class="find">
<form>
<input type="text" name="research" style="width: 160px;height: 20px"/>
<input type="submit" value=""
style="background:url('img/find.png') no-repeat; width:27px; height:27px;">
</form>
</div>
</div>

</div>
<img class="img2" src="img/img.png">

<div id="container">
<hr>
<div class="left">
<div class="exhi">
<h4>展览及讲座 EXHI&LECT</h4>

<div>
<img src="img/img2.png">
</div>
<h3>动画系第一次讲座--《动画文化随想》</h3>
<h5>2015-12-22</h5>
<hr style="height:1px;border:none;border-top:1px dashed grey;">
<ul>
<li>2015年12月17日   考研规划与指导讲座</li>
<li>2015年12月17日   不弃不离的艺术之路--周小愚教授艺术讲座</li>
<li>2015年11月22日   2015环太平洋艺术交流系列活动在湘潭大学举行</li>
<li>2015年10月24日   曾强教授的励志讲座</li>
<li>2015年10月17日   专业教育与考研启迪专题讲座</li>
</ul>

</div>
<div class="dynamic">
<h4>学院动态 DYNAMIC</h4>

</div>

</div>
<div class="right_mid">
<div class="mid">
<h4>招生就业</h4>
<h4>ENROLLMENT&EMPLOYMENT</h4>

<p>
德邦物流股份有限公司本科生招聘<br>
2015年10月05日<br>
德邦物流股份有限公司本科生招聘简章<br>
宣讲时间：2012年4月16
</p>
<hr style="height:1px;border:none;border-top:1px dashed grey;">
<p>
中铁城建集团有限公司招聘信息<br>
2015年10月05日<br>
招聘摄影摄像艺术专业学生1名，专业动手能力强，形象好，作品获奖或有一定经验
</p>
<hr style="height:1px;border:none;border-top:1px dashed grey;">
<p>
艺术学院研究生导师队伍——宋扬<br>
2015年10月03日<br>
艺术学院研究生导师队伍——宋扬 副教授，湖南湘潭人，湘潭大
</p>
<hr style="height:1px;border:none;border-top:1px dashed grey;">
<p>
2015年09月28日 艺术学院2016年推<br>
2015年09月28日 艺术学院2016年推<br>
2015年07月24日 艺术学院研究生研究生
</p>

</div>

<div class="right">
<h4>通知公告</h4>
<h4>ANNOUNCEMENT</h4>

<p>
第八届中国大学生DV文化艺术节作<br>
2016年03月10日<br>
由湘潭大学主办，中国政法大学以及北京服装学院协办的第八届中国大学生

</p>
<hr style="height:1px;border:none;border-top:1px dashed grey;">
<p>
2015年艺术学院教师系列副高级<br>
2015年10月05日<br>
经学院职称评审推荐小组集体讨论，一致同意以下排序结果,同意予以公示三天。

</p>
<hr style="height:1px;border:none;border-top:1px dashed grey;">
<p>
艺术学院2016年推免攻读硕士学<br>
2015年10月05日<br>
复试时间：2015年10月9日上午8:00点； 复试地点：艺术学院会议室
</p>
<hr style="height:1px;border:none;border-top:1px dashed grey;">
<p>
2015年10月05日 艺术学院2015届毕业<br>
2015年10月05日 关于湘大艺术学院<br>
2015年10月05日 关于举办湘潭大学首届
</p>

</div>
<div class="display">
<h4>作品展示 DISPLAY</h4>
<hr>

</div>
</div>

</div>

<div id="footer">
<div class="foot">
<div class="first">
<a>链接 Links</a>

<div>
<ul>
<li>湘潭大学艺术学院OLO教学平台</li>
<li>湘潭大学教务管理系统</li>
<li>中国大学生在线</li>
</ul>
</div>
<div>
<ul>
<li>湘潭大学</li>
<li>湘潭大学图书馆</li>
<li>湖南省设计家协会</li>
</ul>
</div>
<div>
<ul>
<li>湘潭大学学生工作处</li>
<li>国家教育部</li>
<li>中国视觉联盟</li>
</ul>
</div>
</div>

<div class="second">
<hr>
<a>联系 Contact</a>
<ul>
<li>XTU-ART@163.com</li>
<li>电话 +86 0730-65866245</li>
<li>传真 +86 0731-58293856</li>
<li>中国湖南省湘潭市雨湖区湘</li>
<li>潭大学艺术学院</li>
</ul>

</div>

</div>
</div>

</body>
</html>

和css代码：

#header{
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
.img1{
margin-right:40px;
margin-top: 30px;
margin-left: 5px;
float: left;

}
.img2{
margin-left: 300px;
}

.daohang{
margin-right: 40px;
margin-top: 74px;
float: left;
}
.daohang span{
margin-right: 50px;
font-family: 微软雅黑;
}

.find{
float: left;
margin-top: 30px;
margin-left: -200px;
}

#container{
width: 1200px;
margin: 0 auto;
height: 800px;
}
.left{
width:600px;
height: 100%;
float: left;
}
.exhi{
height: 70%;
float: left;
width: 560px;
}
.dynamic{
height: 30%;
float: left;
}
.exhi ul{
list-style-type: none;
margin-left: -40px;
}

.right_mid{
width: 600px;
height:100%;
float: right;
}

.mid{
width: 48%;
height: 70%;
float: left;
margin-right: 24px;

}
.right{
float: right;
width: 48%;
height: 70%;

}
.display{
float: left;
width: 600px;
/*margin-top: 20px;*/
/*height: 250px;*/
height: 30%;

}

#footer{
background-color: darkorange;

}
.foot{
width: 1200px;
margin: 0 auto;
overflow: auto;

}
.foot ul{
margin-left: 130px;
list-style-type:none;
float: left;
}
.second{
clear: both;
}

.second a{
margin-left: -350px;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航