<pre>
清除浮動(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>
- 在浮動(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>
清除浮動(dòng)方式一
給前面的父盒子添加高度
示例代碼:
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
/*這里*/
height: 50px;
}
.box2{
background-color: purple;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
ul li{
float: left;
}
</style>
<div class="box1">
<ul class="ul01">
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
</ul>
</div>
<div class="box2">
<ul class="ul02">
<li>李南江</li>
<li>極客江南</li>
<li>江哥</li>
</ul>
</div>
-
添加高度前:
-
添加高度后
-
注意點(diǎn):
- 在企業(yè)開發(fā)中能不寫高度就不寫高度, 所以這種方式
不常用
- 在企業(yè)開發(fā)中能不寫高度就不寫高度, 所以這種方式
清除浮動(dòng)方式二
利用clear:both;屬性清除前面浮動(dòng)元素對(duì)我的影響
示例代碼:
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
}
.box2{
background-color: purple;
/*這里*/
clear: both;
/*margin無(wú)效*/
margin-top: 30px;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
ul li{
float: left;
}
</style>
<div class="box1">
<ul class="ul01">
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
</ul>
</div>
<div class="box2">
<ul class="ul02">
<li>李南江</li>
<li>極客江南</li>
<li>江哥</li>
</ul>
</div>
-
添加clear: both;前:
-
添加clear: both;后
-
注意點(diǎn):
- 使用clear:both之后margin屬性會(huì)失效, 所以
不常用
- 使用clear:both之后margin屬性會(huì)失效, 所以
清除浮動(dòng)方式三
在兩個(gè)有浮動(dòng)子元素的盒子之間添加一個(gè)額外的塊級(jí)元素
示例代碼:
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
}
.box2{
background-color: purple;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
ul li{
float: left;
}
/*這里*/
.wall{
clear: both;
}
.h20{
/*利用額外塊級(jí)元素實(shí)現(xiàn)margin*/
height: 20px;
background-color: deepskyblue;
}
</style>
<div class="box1">
<ul class="ul01">
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
</ul>
</div>
<!--這里-->
<div class="wall h20"></div>
<div class="box2">
<ul class="ul02">
<li>李南江</li>
<li>極客江南</li>
<li>江哥</li>
</ul>
</div>
-
添加額外塊級(jí)元素前
-
添加額外塊級(jí)元素后
-
注意點(diǎn)
在外墻法中可以通過(guò)設(shè)置額外標(biāo)簽的高度來(lái)實(shí)現(xiàn)margin效果
搜狐中大量使用了這個(gè)技術(shù), 但是由于需要添加大量無(wú)意義的標(biāo)簽, 所以
不常用
清除浮動(dòng)方式四
在前面一個(gè)盒子的最后添加一個(gè)額外的塊級(jí)元素
示例代碼
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
}
.box2{
background-color: purple;
/*margin有效*/
margin-top: 20px;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
ul li{
float: left;
}
/*這里*/
.wall{
clear: both;
}
</style>
<div class="box1">
<ul class="ul01">
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
</ul>
<!--這里-->
<div class="wall"></div>
</div>
<div class="box2">
<ul class="ul02">
<li>李南江</li>
<li>極客江南</li>
<li>江哥</li>
</ul>
</div>
-
添加額外塊級(jí)元素前
-
添加額外塊級(jí)元素后
-
注意點(diǎn):
內(nèi)墻法會(huì)自動(dòng)撐起盒子的高度, 所以可以直接設(shè)置margin屬性
和內(nèi)墻法一樣需要添加很多無(wú)意義的空標(biāo)簽，有違結(jié)構(gòu)與表現(xiàn)的分離，在后期維護(hù)中將是噩夢(mèng)
清除浮動(dòng)方式五
-
什么是overflow:hidden?
- overflow:hidden的作用是清除溢出盒子邊框外的內(nèi)容
示例代碼
.test{
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: red;
overflow: hidden;
}
<div class="test">我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
-
添加overflow:hidden前
-
添加overflow:hidden后
-
如何利用overflow:hidden;清除浮動(dòng)
- 給前面一個(gè)盒子添加overflow:hidden屬性
示例代碼
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
/*這里*/
overflow: hidden;
*zoom:1;
}
.box2{
background-color: purple;
/*margin有效*/
margin-top: 20px;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
ul li{
float: left;
}
</style>
<div class="box1">
<ul class="ul01">
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
</ul>
</div>
<div class="box2">
<ul class="ul02">
<li>李南江</li>
<li>極客江南</li>
<li>江哥</li>
</ul>
</div>
-
添加overflow:hidden;前
-
添加overflow:hidden;后
-
注意點(diǎn):
由于overflow:hidden可以撐起盒子的高度, 所以可以直接設(shè)置margin屬性
IE8以前不支持利用overflow:hidden來(lái)清除浮動(dòng), 所以需要加上一個(gè)*zoom:1;
優(yōu)點(diǎn)可以不用添加額外的標(biāo)簽又可以撐起父元素的高度, 缺點(diǎn)和定位結(jié)合在一起使用時(shí)會(huì)有沖突
-
*zoom:1;和_zoom:1的區(qū)別
這個(gè)是hack寫法，用來(lái)識(shí)別不同版本的IE瀏覽器
_后面的屬性只有IE6能識(shí)別
*后面的屬性 IE6 IE7能識(shí)別
清除浮動(dòng)方式六
給前面的盒子添加偽元素來(lái)清除浮動(dòng)
示例代碼
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red;
}
.box2{
background-color: purple;
/*margin有效*/
margin-top: 20px;
}
ul{
list-style: none;
}
.ul01 li{
background-color: blue;
}
.ul02 li{
background-color: green;
}
li{
float: left;
}
/*這里*/
.clearfix:after {
/*生成內(nèi)容作為最后一個(gè)元素*/
content: "";
/*使生成的元素以塊級(jí)元素顯示,占滿剩余空間*/
display: block;
/*避免生成內(nèi)容破壞原有布局的高度*/
height: 0;
/*使生成的內(nèi)容不可見，并允許可能被生成內(nèi)容蓋住的內(nèi)容可以進(jìn)行點(diǎn)擊和交互*/
visibility: hidden;
/*重點(diǎn)是這一句*/
clear: both;
}
.clearfix {
/*用于兼容IE, 觸發(fā)IE hasLayout*/
*zoom:1;
}
</style>
<div class="box1 clearfix">
<ul class="ul01">
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
</ul>
</div>
<div class="box2">
<ul class="ul02">
<li>李南江</li>
<li>極客江南</li>
<li>江哥</li>
</ul>
</div>
-
添加偽元素前
-
添加偽元素后
-
注意點(diǎn):
本質(zhì)上和內(nèi)墻法一樣, 都是在前面一個(gè)盒子的最后添加一個(gè)額外的塊級(jí)元素
添加偽元素后可以撐起盒子的高度, 所以可以直接設(shè)置margin屬性
CSS中還有一個(gè)東西叫做偽類, 偽元素和偽類不是同一個(gè)東西
