<!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之后，外面的盒子不被頂下來
