<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开班信息</title>
<style type="text/css">
/*清除默认样式*/
*{ margin: 0;
padding 0;
}
/*统一页面中的字体*/
body{ font: 12px/1 宋体;
}
.outer{
width:300px;
height:471px;
background-color: #bfa;
/*居中*/
margin: 50px auto;
.title{
border_top: 2px #019e8b solid;
height: 36px;
background-color: #f5f5f5;
/*设置行高*/
line-height: 36px;
padding: 0px 22px 0px 16px;
}
.title a{
float: right;
color: red;
}
.title h3{
font: 16px/36px "微软雅黑";
}
.content{
border: 1px solid #deddd9;
}
.content a{
color: black;
text-decoration: none;
font-size: 12px;
}
.content u1{
/*去除项目符号*/
list-style: none;
}
.content .red-font{
color: red;
font-weight: bold;
}
.content .right{
float: right;
}
</style>
</head>
<body>
<!-- 创建一个外层div,容纳整个内容 -->
<div class="outer">
<!-- 开班信息的头部 -->
<div class="title">
<h3>近期开班</h3>
<a href="#">18年面授开班计划</a>
</div>
<!-- 开班信息的主体内容 -->
<div class="content">
<h3><a href="#">人工智能+Python-高薪就业班</a></h3>
<u1>
<li>
<a class="right" href="#"><span class="red-fond">预约报名</span></a>
<a href="#">开班时间： <span class="red-font">2018-04-26</span></a>
</li>
<li>
<a class="right" href="#"><span class="red-fond">无座,名额爆满</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>开班盛况</span></a>
<a href="#">开班时间： <span>2017-12-20</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间： <span>2017-11-18</span></a>
</li>
</u1>
<h3><a href="#">Android开发+测试-高薪就业班</a></h3>
<u1>
<li>
<a class="right" href="#"><span class="red-fond">预约报名</span></a>
<a href="#">开班时间： <span class="red-font">2018-04-26</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间： <span>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>开班盛况</span></a>
<a href="#">开班时间： <span>2018-12-20</span></a>
</li>
</u1>
<h3><a href="#">大数据软件开发-青芒工作室</a></h3>
<u1>
<li>
<a class="right" href="#"><span class="red-fond">预约报名</span></a>
<a href="#">开班时间： <span class="red-font">2018-04-26</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间： <span>2018-01-23</span></a>
</li>
</u1>
</div>
</div>
</body>
清除浮动
定义三个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浮动的方式就是这样。其实清除浮动不止这三种，但这三种是比较常用的，最为推荐的就是最后一种。清除浮动时，可根据当前布局选择最为合适的方式，不一定说指定要用哪一种，最适合的就是最好的。
高度塌陷问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box1{
/*为box1设置一个边框*/
border: 10px red solid;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
/*
* 在文档流中，父元素的高度默认是被子元素撑开的，
* 也就是子元素多高，父元素就多高。
* 但是当为子元素设置浮动以后，子元素会完全脱离文档流，
* 此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
* 由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
*
* 所以在开发中一定要避免出现高度塌陷的问题,
* 我们可以将父元素的高度写死，以避免塌陷的问题出现，
* 但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。
*/
/*为子元素设置向左浮动*/
float: left;
}
.box3{
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
网友评论