清除浮動(dòng)
盒子高度問(wèn)題
在標(biāo)準(zhǔn)流中內(nèi)容的高度可以撐起盒子的高度
<style>
div{
background-color: red;
}
p{
width: 200px;
height: 100px;
background-color: blue;
}
</style>
<div>
<p></p>
</div>
image.png
- 在浮動(dòng)流中浮動(dòng)元素內(nèi)容的高不可以撐起盒子的高
<style>
div{
background-color: red;
}
p{
float: left;
width: 200px;
height: 100px;
background-color: blue;
}
</style>
<div>
<p></p>
</div>
image.png
清除浮動(dòng)方式一
- 給前面的父盒子添加高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>65-清除浮動(dòng)方式一</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
height: 20px;
background-color: red;
}
.box2{
background-color: green;
}
.box1 p{
width: 100px;
background-color: blue;
}
.box2 p{
width: 100px;
background-color: yellow;
}
p{
float: left;
}
</style>
</head>
<body>
<!--
1.清除浮動(dòng)的第一種方式
給前面一個(gè)父元素設(shè)置高度
注意點(diǎn):
在企業(yè)開(kāi)發(fā)中, 我們能不寫(xiě)高度就不寫(xiě)高度, 所以這種方式用得很少
-->
<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>
</body>
</html>
清除浮動(dòng)方式二
給后面的盒子添加clear屬性
clear屬性取值:
none: 默認(rèn)取值, 按照浮動(dòng)元素的排序規(guī)則來(lái)排序(左浮動(dòng)找左浮動(dòng), 右浮動(dòng)找右浮動(dòng))
left: 不要找前面的左浮動(dòng)元素
right: 不要找前面的右浮動(dòng)元素
both: 不要找前面的左浮動(dòng)元素和右浮動(dòng)元素
注意點(diǎn):
當(dāng)我們給某個(gè)元素添加clear屬性之后, 那么這個(gè)屬性的margin屬性就會(huì)失效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>66-清除浮動(dòng)方式二</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
border: 1px solid #000;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
clear: both;
margin-top: 28px;
}
.box1 p{
width: 100px;
background-color: blue;
}
.box2 p{
width: 100px;
background-color: yellow;
}
p{
float: left;
}
/*
.dd{
width: 500px;
height: 500px;
background-color: red;
border: 1px solid #000;
}
.ddd{
width: 200px;
height: 200px;
background-color: blue;
margin-top: 100px;
}
*/
</style>
</head>
<body>
<!--
1.清除浮動(dòng)的第二種方式
給后面的盒子添加clear屬性
clear屬性取值:
none: 默認(rèn)取值, 按照浮動(dòng)元素的排序規(guī)則來(lái)排序(左浮動(dòng)找左浮動(dòng), 右浮動(dòng)找右浮動(dòng))
left: 不要找前面的左浮動(dòng)元素
right: 不要找前面的右浮動(dòng)元素
both: 不要找前面的左浮動(dòng)元素和右浮動(dòng)元素
注意點(diǎn):
當(dāng)我們給某個(gè)元素添加clear屬性之后, 那么這個(gè)屬性的margin屬性就會(huì)失效
-->
<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="dd">
<div class="ddd"></div>
</div>
-->
</body>
</html>
清除浮動(dòng)的第三種方式
1.隔墻法
2.外墻法
2.1在兩個(gè)盒子中間添加一個(gè)額外的塊級(jí)元素
2.2給這個(gè)額外添加的塊級(jí)元素設(shè)置clear: both;屬性
注意點(diǎn):
外墻法它可以讓第二個(gè)盒子使用margin-top屬性
外墻法不可以讓第一個(gè)盒子使用margin-bottom屬性
3.內(nèi)墻法
3.1在第一個(gè)盒子中所有子元素最后添加一個(gè)額外的塊級(jí)元素
3.2給這個(gè)額外添加的塊級(jí)元素設(shè)置clear: both;屬性
注意點(diǎn):
內(nèi)墻法它可以讓第二個(gè)盒子使用margin-top屬性
內(nèi)墻法它可以讓第一個(gè)盒子使用margin-bottom屬性
4.外墻法和內(nèi)墻法區(qū)別?
外墻法不能撐起第一個(gè)盒子的高度, 而內(nèi)墻法可以撐起第一個(gè)盒子的高度
5.在企業(yè)開(kāi)發(fā)中不常用隔墻法來(lái)清除浮動(dòng)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>67-清除浮動(dòng)方式三</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
/*margin-bottom: 10px;*/
}
.box2{
background-color: green;
/*margin-top: 10px;*/
}
.box1 p{
width: 100px;
background-color: blue;
}
.box2 p{
width: 100px;
background-color: yellow;
}
p{
float: left;
}
.wall{
clear: both;
}
.h20{
height: 20px;
background-color: skyblue;
}
</style>
</head>
<body>
<!--
1.清除浮動(dòng)的第三種方式
隔墻法
2.外墻法
2.1在兩個(gè)盒子中間添加一個(gè)額外的塊級(jí)元素
2.2給這個(gè)額外添加的塊級(jí)元素設(shè)置clear: both;屬性
注意點(diǎn):
外墻法它可以讓第二個(gè)盒子使用margin-top屬性
外墻法不可以讓第一個(gè)盒子使用margin-bottom屬性
3.內(nèi)墻法
3.1在第一個(gè)盒子中所有子元素最后添加一個(gè)額外的塊級(jí)元素
3.2給這個(gè)額外添加的塊級(jí)元素設(shè)置clear: both;屬性
注意點(diǎn):
內(nèi)墻法它可以讓第二個(gè)盒子使用margin-top屬性
內(nèi)墻法它可以讓第一個(gè)盒子使用margin-bottom屬性
4.外墻法和內(nèi)墻法區(qū)別?
外墻法不能撐起第一個(gè)盒子的高度, 而內(nèi)墻法可以撐起第一個(gè)盒子的高度
5.在企業(yè)開(kāi)發(fā)中不常用隔墻法來(lái)清除浮動(dòng)
-->
<div class="box1">
<p>我是文字1</p>
<p>我是文字1</p>
<p>我是文字1</p>
<div class="wall h20"></div>
</div>
<!--<div class="wall h20"></div>-->
<div class="box2">
<p>我是文字2</p>
<p>我是文字2</p>
<p>我是文字2</p>
</div>
</body>
</html>
1.什么是偽元素選擇器?
偽元素選擇器作用就是給指定標(biāo)簽的內(nèi)容前面添加一個(gè)子元素或者給指定標(biāo)簽的內(nèi)-容后面添加一個(gè)子元素
2.格式:
標(biāo)簽名稱(chēng)::before{
屬性名稱(chēng):值;
}
給指定標(biāo)簽的內(nèi)容前面添加一個(gè)子元素
標(biāo)簽名稱(chēng)::after{
屬性名稱(chēng):值;
}
給指定標(biāo)簽的內(nèi)容后面添加一個(gè)子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>68-偽元素選擇器</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background-color: red;
}
/*
p{
width: 50px;
height: 50px;
background-color: pink;
}
*/
div::before{
content: "愛(ài)你";
width: 50px;
height: 50px;
background-color: pink;
display: block;
}
div::after{
/*指定添加的子元素中存儲(chǔ)的內(nèi)容*/
content: "么么噠";
/*指定添加的子元素的寬度和高度*/
width: 50px;
/*height: 50px;*/
/*內(nèi)容是可以超出標(biāo)簽的范圍的, 所以高度為0依然可以看見(jiàn)內(nèi)容*/
height:0;
background-color: pink;
/*指定添加的子元素的顯示模式*/
display: block;
/*隱藏添加的子元素*/
visibility: hidden;
}
</style>
</head>
<body>
<!--
1.什么是偽元素選擇器?
偽元素選擇器作用就是給指定標(biāo)簽的內(nèi)容前面添加一個(gè)子元素或者給指定標(biāo)簽的內(nèi)容后面添加一個(gè)子元素
2.格式:
標(biāo)簽名稱(chēng)::before{
屬性名稱(chēng):值;
}
給指定標(biāo)簽的內(nèi)容前面添加一個(gè)子元素
標(biāo)簽名稱(chēng)::after{
屬性名稱(chēng):值;
}
給指定標(biāo)簽的內(nèi)容后面添加一個(gè)子元素
-->
<div>
<!--<p>愛(ài)你</p>-->
我是文字
<!--<p>么么噠</p>-->
</div>
</body>
</html>
清除浮動(dòng)的第四種方式
利用偽元素選擇器清除浮動(dòng)
本質(zhì)上就是內(nèi)墻法, 只不過(guò)是直接通過(guò)CSS代碼添加了內(nèi)墻, 其它特性和內(nèi)墻法都一樣
注意點(diǎn):
IE6中不支持這種方式, 為了兼容IE6必須給前面的盒子添加*zoom:1;屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>69-清除浮動(dòng)方式四</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
/*margin-bottom: 10px;*/
}
.box2{
background-color: green;
/*margin-top: 10px;*/
}
.box1 p{
width: 100px;
background-color: blue;
}
.box2 p{
width: 100px;
background-color: yellow;
}
p{
float: left;
}
.box1::after{
/*設(shè)置添加的子元素的內(nèi)容為空*/
content: "";
/*設(shè)置添加的子元素為塊級(jí)元素*/
display: block;
/*設(shè)置添加的子元素的高度為0*/
height: 0;
/*設(shè)置添加的子元素看不見(jiàn)*/
visibility: hidden;
/*給添加的子元素設(shè)置clear: both;*/
clear: both;
}
.box1{
/*兼容IE6*/
*zoom:1;
}
</style>
</head>
<body>
<!--
1.清除浮動(dòng)的第四種方式
利用偽元素選擇器清除浮動(dòng)
本質(zhì)上就是內(nèi)墻法, 只不過(guò)是直接通過(guò)CSS代碼添加了內(nèi)墻, 其它特性和內(nèi)墻法都一樣
注意點(diǎn):
IE6中不支持這種方式, 為了兼容IE6必須給前面的盒子添加*zoom:1;屬性
-->
<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>
</body>
</html>
overflow: hidden;作用
- 1.1可以將超出標(biāo)簽范圍的內(nèi)容裁剪掉
- 1.2清除浮動(dòng)
- 1.3可以通過(guò)overflow: hidden;讓里面的盒子設(shè)置margin-top之后, 外面的盒子不被頂下來(lái)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>70-清除浮動(dòng)方式五</title>
<style>
*{
margin: 0;
padding: 0;
}
/*
div{
width: 100px;
height: 100px;
background-color: red;
overflow: hidden;
}
*/
/*
.box1{
background-color: red;
overflow: hidden;
*zoom:1;
}
.box2{
background-color: green;
}
.box1 p{
width: 100px;
background-color: blue;
}
.box2 p{
width: 100px;
background-color: yellow;
}
p{
float: left;
}
*/
.box1{
width: 200px;
height: 200px;
background-color: red;
/*border: 1px solid #000;*/
overflow: hidden;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
margin-top: 20px;
}
</style>
</head>
<body>
<!--
1.overflow: hidden;作用
1.1可以將超出標(biāo)簽范圍的內(nèi)容裁剪掉
1.2清除浮動(dòng)
1.3可以通過(guò)overflow: hidden;讓里面的盒子設(shè)置margin-top之后, 外面的盒子不被頂下來(lái)
--><!--
<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="box1">
<div class="box2"></div>
</div>
</body>
</html>
注意點(diǎn):
添加偽元素后可以撐起盒子的高度, 所以可以直接設(shè)置margin屬性
先知道有這些方式, 原理需要學(xué)習(xí)到BFC和hasLayout才能明白
支持BFC的瀏覽器（IE8+后频，firefox，chrome暖途，safari）通過(guò)創(chuàng)建新的BFC閉合浮動(dòng)卑惜；
不支持 BFC的瀏覽器 （IE5-7），通過(guò)觸發(fā) hasLayout 閉合浮動(dòng)驻售。
