float设置浮动：
float有3个可选值，分别是：float:left向左浮动，float:right向右浮动，float:none不浮动
1.设置浮动以后，会脱离文档流，级别会比文档流的内容等级高，覆盖文档流
2.内联元素用float浮动之后，会变成一个块元素
3.浮动的边界：父元素的边框 或者是 其他浮动的边框（浮动会自动的换行）
用float浮动，可以设置文字环绕图片的效果；
图片.png
clear清除浮动：
定义：clear属性可以用于清除元素周围的浮动对元素的影响。也就是元素不会因为上方出现了浮动元素而改变位置
可选值：left：忽略左侧浮动
right：忽略右侧浮动
both：忽略全部浮动
none：不忽略浮动，默认值
高度塌陷
含义：子元素浮动后，使父元素的高度高度消失，影响到页面的布局
解决方法：
BFC：1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素
隐藏BFC的几种方法：
1.设置元素的浮动（缺点：宽度丢失，影响布局）
2.设置绝对定位
3.设置元素为inline-block
4.将元素overflow设置为一个hidden或者是auto
5.在内容的最后设置一个空的div，设置清除浮动（IE6不支持，要设置一个zoom：1）
6.给要清除浮动的那个标签用after，设置content内容为空，block转化成块，然后清除浮动
定位positon
position的三个可选值：
1.static 默认值，没有定位；
2.relative相对定位
图片.png
图片.png
（相对于元素本身进行定位，提升级别，不改变属性）
3.absolute绝对定位
图片.png
（1）开启会脱离文档流
（2）相对最近的 开启定位的 祖先元素
（3）使内联元素变成块（改变属性）
4.fixed固定定位（可以用于页面的始终悬浮条设置）
图片.png
（1）脱离文档流
（2）相对于浏览器
（3）不会跟随页面滚动而移动
（4）IE6不支持
招生信息表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>招生信息表</title>
<style type="text/css">
.out{
width: 303px;
height: 550px;
background-color:#d3d3d3;
margin: 50px auto 0;
}
.one{
width: 295px;
height: 498px;
/*margin-top: 16px;*/
margin-left: 4px;
background-color: white;
}
.title{
width: 303px;
height: 49px;
border-top: 2px #019e8b solid;
/*background-color:white;*/
/*margin-left: 2px;*/
}
*{
margin: 0;
padding: 0;
}
.p1{
font:16px '微软雅黑';
/*background-color: orange;*/
display: block;
margin:13px 104px 10px 16px;
float: left;
}
.open{
color: red;
font-size:11px;
/*background-color: skyblue;*/
float: left;
margin: 15px 23px 12px 0;
}
.first{
margin:6px 100px 16px 20px;
/*padding-right: 65px;*/
font-size: 12px;
color: black;
font-weight: bold;
}
#id{
border-top: 1px dashed rgb(222,221,217);
padding-top: 10px;
}
.out li{
list-style: none;
float: left;
}
a{
text-decoration: none;
color: black;
}
.a1{
text-decoration: none;
color: red;
}
a:hover{
text-decoration: underline;
color: red;
}
.time{
margin-left: 20px;
/*margin: 0 0 0 20px;*/
}
.date{
margin: 5px 79px 14px 8px;
font-size: 10px;
color: red;
}
.date1{
margin: 5px 79px 14px 8px;
font-size: 10px;
color: black;
}
.date2{
margin: 5px 53px 12px 8px;
font-size: 10px;
color: red;
}
.end-font2{
font-size: 12px;
color: red;
margin-bottom: 14px;
}
.end-font{
font-size: 12px;
color: red;
/*background-color: red;*/
}
.end-font-open{
font-size: 12px;
color: black;
}
</style>
</head>
<body>
<div class="out">
<div class="title">
<p class="p1">近期开班</p>
<ul>
<li><a href="#" class="open">18年面授开班计划</a></li>
</ul>
</div>
<div class="one">
<div>
<ul>
<li class="first"><a href="#">人工智能+Python-高薪就业班</a></li>
<li class="time">开班时间:</li>
<ul>
<li class="date"><a href="#" class="a1">2018-04-26</a></li>
<li class="end-font"><a href="#" class="a1">预约报名</a></li>
</ul>
<li class="time">开班时间:</li>
<ul>
<li class="date2"><a href="#" class="a1">2018-03-23</a></li>
<li class="end-font2"><a href="#" class="a1">无座,名额爆满</a></li>
</ul>
<li class="time">开班时间:</li>
<ul>
<li class="date1"><a href="#">2018-01-23</a></li>
<li class="end-font-open"><a href="#">开班盛况</a></li>
</ul>
<li class="time">开班时间:</li>
<ul>
<li class="date1"><a href="#">2018-12-20</a></li>
<li class="end-font-open"><a href="#">开班盛况</a></li>
</ul>
<li class="time">开班时间:</li>
<ul>
<li class="date1"><a href="#">2018-11-18</a></li>
<li class="end-font-open"><a href="#">开班盛况</a></li>
</ul>
</ul>
<div class="line">
<ul>
<li class="first" id="id"><a href="#">Android开发+测试-高薪就业班</a></li>
<li class="time">开班时间:</li>
<ul>
<li class="date"><a href="#" class="a1">2018-04-26</a></li>
<li class="end-font"><a href="#" class="a1">预约报名</a></li>
</ul>
<li class="time">开班时间:</li>
<ul>
<li class="date1"><a href="#">2018-03-23</a></li>
<li class="end-font-open"><a href="#">开班盛况</a></li>
</ul>
<li class="time">开班时间:</li>
<ul>
<li class="date1"><a href="#">2018-01-23</a></li>
<li class="end-font-open"><a href="#">开班盛况</a></li>
</ul>
<li class="time">开班时间:</li>
<ul>
<li class="date1"><a href="#">2018-12-20</li>
<li class="end-font-open"><a href="#">开班盛况</a></li>
</ul>
</ul>
</div>
<div class="line">
<ul>
<li class="first" id="id"><a href="#">大数据软件开发-青芒工作室</a></li>
<li class="time"><a href="#">开班时间:</li>
<ul>
<li class="date"><a href="#" class="a1">2018-04-26</li>
<li class="end-font"><a href="#" class="a1">预约报名</li>
</ul>
<li class="time"><a href="#">开班时间:</li>
<ul>
<li class="date1"><a href="#">2018-01-23</li>
<li class="end-font-open"><a href="#">开班盛况</li>
</ul>
</ul>
</ul>
</div>
</div>
</body>
</html>
效果：
图片.png
图片.png
网友评论