高度塌陷
父元素包含的子元素，子元素多高。父亲没指定，默认子元素高。
子元素设置浮动以后，子元素脱离文档流，此时子元素无法撑起父元素的高度，导致父元素的高度塌陷
我们可以将父元素的高度写死，避免塌陷
元素重叠，子父一起动。
解决高度塌陷
面试 开启BFC
特点
1 设置元素浮动 缺点宽度丢失 不推荐
2设置元素绝对定位 不推荐和1一样
3 设置元素为inline-block 缺点宽度丢失 也不推荐
4将元素的overflow设置为一个非visible的值 推荐
ie6以下不执行BFC。
（但是还有背的属性 haslayout（类似BFC））
（只是在ie里面支持）zoom：1；后面代表放大倍数。1是默认不放大。
所以默认这二个同时写。
ie6设置宽度了，在服务器端就不会踏。
清除浮动
.box1{
width: 100px;
height: 100px;
background-color: yellow;
/*设置box1向左浮动*/
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: yellowgreen;
box1影响box2上移，为了不影响浮动对当前元素产生的影响。
clear来完成功能
可选值：
none，默认值，不清除浮动
left，清除左侧浮动元素对当前元素的影响
right，清除右侧浮动元素对当前元素的影响
both，清除两侧浮动元素对当前元素的影响
清除对他影响最大的那个元素的浮动
解决高度塌陷
可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的
.clear{
clear: both;
}
可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动最推荐
after内联元素。伪类
.clearfix:after{
content: "";
/*转换为一个块元素*/
display: block;
/*清除两侧的浮动*/
clear: both;
}
/*在ie6中不支持after伪类处理*/
.clearfix{
zoom: 1;
}
相对定位
相对定位元素，位置还有，不脱离文档流。所以块还是快，内联还是内联。position：relative。会提升一个层级。
相对自身的位置定位。
left: 100px;
top: 200px;
绝对定位。
position：absolute。
脱离文档流。
相对于离他最近开启定位的祖先元素。都没开就是浏览器左上角。
会提升一个层级。
内联变块，宽高有效，块变被内容撑开。
父元素开相对
子元素相对于父元素开绝对。
relative（必须有）
固定定位
static：默认值，元素没有开启定位
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位（也是绝对定位的一种）
固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
不同的是：
固定定位永远相对00
当滚动条动，他也不走。
fixed
homework3.png
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>homework</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font: 12px/1 字体
}
.outer{
width: 300px ;
/*height:471px ;*/
/*background-color: #bfa;*/
margin: 0 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 h3{
margin-top: 15px;
margin-bottom: 15px;
}
.content{
border: 1px solid #deddd9;
/*高考内容撑开*/
padding: 0px 28px 0px 20px
}
.content li{
margin-bottom: 15px;
}
.content a{
color: black;
text-decoration: none;
font-size:12px;
}
.content a:hover{
color: red;
text-decoration:underline;
}
.content ul{
list-style: none;
border-bottom: 1px dashed #deddd9;
}
.content .red-font{
color: red;
font-weight: bold;
}
.content .right{
float: right;
}
.content .no-border{
border: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="title">
<a href="#">18年面授开班计划</a>
<h3>近期开班</h3>
</div>
<div class="content">
<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-04-26</span></a>
</li>
<li>
<a class='right' href="#"><span >开班盛况</span></a>
<a href="#">开班时间： <span >2018-04-26</span></a>
</li>
<li>
<a class='right' href="#"><span >开班盛况</span></a>
<a href="#">开班时间： <span ">2018-04-26</span></a>
</li>
<li>
<a class='right' href="#"><span >开班盛况</span></a>
<a href="#">开班时间： <span >2018-04-26</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 >开班盛况</span></a>
<a href="#">开班时间： <span >2018-04-26</span></a>
</li>
<li>
<a class='right' href="#"><span >开班盛况</span></a>
<a href="#">开班时间： <span ">2018-04-26</span></a>
</li>
<li>
<a class='right' href="#"><span >开班盛况</span></a>
<a href="#">开班时间： <span >2018-04-26</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 >开班盛况</span></a>
<a href="#">开班时间： <span ">2018-04-26</span></a>
</li>
<li>
<a class='right' href="#"><span >开班盛况</span></a>
<a href="#">开班时间： <span >2018-04-26</span></a>
</li>
</ul>
</div>
</div>
</body>
</html>
网友评论