高度塌陷问题：
在文档流中，父元素的高度默认是被子元素撑开的，
也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
所以在开发中一定要避免出现高度塌陷的问题,
我们可以将父元素的高度写死，以避免塌陷的问题出现，
但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。
清除浮动
clear属性可用于清除元素周围浮动对元素的影响
元素不会因为上方出现了浮动元素而改变位置
可选值：
clear:left 忽略左侧浮动
clear:right 忽略右侧浮动
clear:both 忽略全部浮动
clear:none 不忽略浮动，默认值
定义三个div：父容器container、子容器box1、box2，这里container没有给定高度。
css中的块级元素是独占一行的，从上往下排列，我们称为标准流，div就是块级元素。
第一种方式：添加新元素，使用clear:both;
这种方式优点就是代码少，容易理解，浏览器几乎都支持，出现的问题比较少，但缺点就是如果页面浮动浮动布局多的话，就要添加很多空div去清除浮动，不便优化。虽然这是常用的清除浮动方式，但不建议使用
第二种方式：父容器使用overflow: auto;
使用这种方法，必须定义width或者zoom,而且不能设置高度height，优点是代码少，缺点是不能使用position,否则超出的元素将会被隐藏
第三种：父容器使用伪类:after跟zoom
这种方式是最推荐的，目前大多数大型网站都是使用这种方式清除浮动，浏览器兼容好，不会出现什么奇怪的问题。
zoom是IE专有属性，可解决ie6,ie7浮动问题，IE8以上和非IE浏览器才支持伪类:after。
缺点就是代码比较多，需要伪类:after跟zoom一起使用才能兼容所有主流浏览器。
但推荐使用，可将改样式定义为公共样式，减少代码量
三种清除css浮动的方式就是这样。其实清除浮动不止这三种，但这三种是比较常用的，最为推荐的就是最后一种。清除浮动时，可根据当前布局选择最为合适的方式，不一定说指定要用哪一种，最适合的就是最好的。
相对定位
当position属性设置为relative时，则开启了元素的相对定位
相对定位不会改变元素原来的特性
相对定位不会使元素脱离文档流，元素在文档流中的位置不会改变
如果不设置元素的偏移量，元素位置不发生改变
相对定位会使元素层级提升，使元素可以覆盖文本流中的元素
开班信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>\e</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font: 12px/1 宋体;
}
.ann{
width: 300px;
height: 471px;
margin: 50px auto;
}
.ann0{
border-top: 2px #019e8b solid;
height: 36px;
background-color: #f5f5f5;
line-height: 36px;
padding: 0px 22px 0px 16px;
}
.ann0 a{
float: right;
color: red;
}
.ann0 h3{
font: 16px/36px "微软雅黑";
}
.ann1{
border: 1px solid #deddd9;
padding: 0px 28px 0px 20px;
}
.ann1 a{
color: black;
text-decoration: none;
font-size: 12px;
}
.ann1 a:hover{
color: green;
text-decoration: underline;
}
.ann1 h3{
margin-top: 15px;
margin-bottom: 15px;
}
.ann1 ul{
list-style: none;
border-bottom: 1px dashed #deddd9;
}
.ann1 li{
margin-bottom: 15px;
}
.ann1 .red-font{
color: red;
font-weight: bold;
}
.ann1 .right{
float:right ;
}
.content .no-border{
border: none;
}
</style>
</head>
<body>
<div class="ann">
<div class="ann0">
<a href="#">18年面授开班计划</a>
<h3>近期开班</h3>
</div>
<div class="ann1">
<h3><a href="#">人工智能+Python-高薪就业班</a></h3>
<ul>
<li>
<a class="right" href="#"><span class="red-font">预约报名</span> </a>
<a href="#">开班时间:<span class="red-font">2018-04-26</span></a>
</li>
<li>
<a class="right" href="#"><span class="red-font">无座，名额爆满</span> </a>
<a href="#">开班时间:<span class="red-font">2018-03-23</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span> </a>
<a href="#">开班时间:<span>2018-01-23</span></a>
</li>
<li>
<a class="right" href="#"><span class="red-font">开班盛况</span> </a>
<a href="#">开班时间:<span class="red-font">2017-12-20</span></a>
</li>
<li>
<a class="right" href="#"><span class="red-font">开班盛况</span> </a>
<a href="#">开班时间:<span class="red-font">2017-11-18</span></a>
</li>
</ul>
<h3><a href="#">Android开发+测试-高薪就业班</a> </h3>
<ul>
<li>
<a class="right" href="#"><span class="red-font">预约报名</span> </a>
<a href="#">开班时间:<span class="red-font">2018-04-26</span></a>
</li>
<li>
<a class="right" href="#"><span class="red-font">开班盛况</span> </a>
<a href="#">开班时间:<span class="red-font">2018-03-23</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span> </a>
<a href="#">开班时间:<span>2018-01-23</span></a>
</li>
<li>
<a class="right" href="#"><span class="red-font">开班盛况</span> </a>
<a href="#">开班时间:<span class="red-font">2017-12-20</span></a>
</li>
</ul>
<h3><a href="#">大数据软件开发-青芒工作室</a> </h3>
<ul class="no-border">
<li>
<a class="right" href="#"><span class="red-font">预约报名</span> </a>
<a href="#">开班时间:<span class="red-font">2018-04-26</span></a>
</li>
<li>
<a class="right" href="#"><span class="red-font">开班盛况</span> </a>
<a href="#">开班时间:<span class="red-font">2018-01-23</span></a>
</li>
</ul>
</div>
</div>
</body>
</html>
网友评论