<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动流</title>
<style media="screen">
/*div{
border: 2px solid black;
}
p{
height: 200px;
width: 200px;
background-color: red;
float: left;
}*/
*{
margin: 0;
padding: 0;
}
/*.box1{
background-color: red;
height: 20px;
}
.box1 p{
background-color: green;
width: 100px;
height: 20px;
float: left;
}
.box2{
background-color: blue;
}
.box2 p{
background-color: brown;
width: 100px;
height: 20px;
float: left;
}*/
/*.box1{
background-color: red;
}
.box1 p{
background-color: green;
width: 100px;
height: 20px;
float: left;
}
.box2{
background-color: blue;
clear: both;
margin-top: 20px;
}
.box2 p{
background-color: brown;
width: 100px;
height: 20px;
float: left;
}*/
/*.box1{
background-color: red;
}
.box1 p{
background-color: green;
width: 100px;
height: 20px;
float: left;
}
.wall{
background-color: purple;
clear: both;
}
.h20{
height: 20px;
}
.box2{
background-color: blue;
}
.box2 p{
background-color: brown;
width: 100px;
height: 20px;
float: left;
}*/
div{
height: 200px;
width: 200px;
background-color: green;
}
div::before{
content: "before";
width: 50px;
height: 50px;
background-color: red;
display: block;
}
div::after{
content: "after";
width: 50px;
height: 0px;
background-color: red;
display: block;
visibility: hidden;
}
/*.box1{
background-color: red;
}
.box1::after{
display: block;
clear: both;
content: "";
}
.box1{
*zoom:1;
}
.box1 p{
background-color: green;
width: 100px;
height: 20px;
float: left;
}
.box2{
background-color: blue;
}
.box2 p{
background-color: brown;
width: 100px;
height: 20px;
float: left;
}*/
/*.box1{
background-color: red;
overflow: hidden;
}
.box1{
*zoom:1;
}
.box1 p{
background-color: green;
width: 100px;
height: 20px;
float: left;
}
.box2{
background-color: blue;
}
.box2 p{
background-color: brown;
width: 100px;
height: 20px;
float: left;
}*/
/*div{
width: 50px;
height: 50px;
background-color: red;
overflow: hidden;
}*/
/*.box{
height: 300px;
width: 300px;
background-color: red;
overflow: hidden;
}
.box1{
height: 100px;
width: 100px;
background-color: blue;
margin-top: 20px;
}*/
</style>
</head>
<body>
<!-- <div class="">
<p></p>
</div> -->
<!-- <div class="box1">
<p>文字1</p>
<p>文字1</p>
<p>文字1</p>
</div>
<div class="box2">
<p>文字2</p>
<p>文字2</p>
<p>文字2</p>
</div> -->
<!-- <div class="box1">
<p>文字1</p>
<p>文字1</p>
<p>文字1</p>
</div>
<div class="wall h20">
</div>
<div class="box2">
<p>文字2</p>
<p>文字2</p>
<p>文字2</p>
</div> -->
<!-- <div class="box1">
<p>文字1</p>
<p>文字1</p>
<p>文字1</p>
<div class="wall h20">
</div>
</div>
<div class="box2">
<p>文字2</p>
<p>文字2</p>
<p>文字2</p>
</div> -->
<div class="">
我是文字div
</div>
<!-- <div class="box1">
<p>文字1</p>
<p>文字1</p>
<p>文字1</p>
</div>
<div class="box2">
<p>文字2</p>
<p>文字2</p>
<p>文字2</p>
</div> -->
<!-- <div class="">
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</div> -->
<!-- <div class="box">
<div class="box1">
</div>
</div> -->
</body>
</html>
第128课 浮动元素高度问题
1、在标准流中内容的高度可以撑起父元素的高度
2、在浮动流中浮动的元素是不可以撑起父元素的高度的
第129课 清除浮动方式一
给前面一个父元素设置高度
注意点：
在企业开发中，我们能不写高度就不写高度，所以这种方式用的很少
第130课 清除浮动方式二
给后面的盒子添加clear属性
clear属性取值：
none：默认取值方式，按照浮动元素的排序规则来排序
left:不要找前面的左浮动元素
right:不要找前面的右浮动元素
both:不要找前面的左浮动元素和右浮动元素 (用的最多)
注意点：
当我们给某个元素添加了clear属性后，那么这个元素的margin-top属性就会失效
第131课 margin-top失效原因
当父元素没有设置边框时，设置元素的margin-top时，父元素会直接被顶下来；
当设置父元素的边框后，再设置元素的margin-top时，可以出现下移，但是要大于前面元素的高度
注意点：
在企业开发中没有设置body的边框的
第132课 清除浮动方式三
隔墙法 通过HTML修改样式 不推荐
1、外墙法
1.1 在两个盒子中间添加一个额外的块级元素
1.2 给这个额外添加的块级元素设置clear:both;属性
注意点：
外墙法它可以让第二个盒子使用margin-top属性，但是不可以让第一个盒子使用margin-bottom属性
可以通过改变额外添加元素的高度设置间距
第132课 清除浮动方式四
1、内墙法
1.1 在第一个盒子中所有子元素最后一个添加一个额外的块级元素
1.2 给这个额外添加的块级元素设置clear:both;属性
注意点：
内墙法它可以让第二个盒子使用margin-top属性，同时可以让第一个盒子使用margin-bottom属性
可以通过改变额外添加元素的高度设置间距
区别：
外墙法不能撑起第一个盒子的高度，而内墙法可以撑起第一个盒子的高度
在企业开发中不常用隔墙法来清除浮动
第134课 伪元素选择器
伪元素选择器作用就是给指定标签的内容前面或后面添加一个子元素
格式：
标签名称::before{
属性名称：值；
}
标签名称::after{
属性名称：值；
}
注意点：
当隐藏一个元素时，设置高度为0时，内容会超出元素范围显示，必须设置visibility：hidden；
第135课 清除浮动方式五
利用伪元素选择器：通过CSS修改样式推荐
利用伪元素选择器，给第一个元素添加.box1::after{
display: block;
clear: both;
content: "";
}，
同时设置伪元素选择器clear：both;
兼容IE6 给第一个元素添加 *zoom:1;
注意点：
它可以让第二个盒子使用margin-top属性，同时可以让第一个盒子使用margin-bottom属性
可以通过改变额外添加元素的高度设置间距
第136课 清除浮动方式六
overflow：hidden； 推荐使用
作用：
1、可以将超出标签范围的内容剪切掉
2、清除浮动 兼容IE6时给第一个元素添加 *zoom:1; 它可以让第二个盒子使用margin-top属性，同时可以让第一个盒子使用margin-bottom属性
可以通过改变额外添加元素的高度设置间距
3、可以通过overflow：hidden；让里面的盒子设置margin-top之后，外面的盒子不被顶下来
