1.浮動(dòng)的清除
1.1.浮動(dòng)現(xiàn)象
現(xiàn)在兩個(gè)div,div身上沒有任何屬性。每個(gè)div中都有l(wèi)i渔呵,這些li都是浮動(dòng)的,我們本以為這些li怒竿,會(huì)分為兩排,但是扩氢,第二組中的第1個(gè)li耕驰,去貼靠第一組中的最后一個(gè)li了,而實(shí)際結(jié)果:第二個(gè)div中的li,去貼第一個(gè)div中最后一個(gè)li的邊了录豺。原因就是因?yàn)閐iv沒有高度朦肘,不能給自己浮動(dòng)的孩子們,一個(gè)容器双饥。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
li{
float: left;
width: 90px;
height: 40px;
background-color: gold;
/*文本居中*/
text-align: center;
}
</style>
</head>
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設(shè)計(jì)模式</li>
</ul>
</div>
<div>
<ul>
<li>學(xué)習(xí)方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>
image.png
1.2. 清除浮動(dòng)方法1(高度固定媒抠,很少使用)
給浮動(dòng)的元素的祖先元素加高度,如果一個(gè)元素要浮動(dòng),那么它的祖先元素一定要有高度兢哭。高度的盒子领舰,才能關(guān)住浮動(dòng),只要浮動(dòng)在一個(gè)有高度的盒子中夫嗓,那么這個(gè)浮動(dòng)就不會(huì)影響后面的浮動(dòng)元素迟螺。所以就是清除浮動(dòng)帶來的影響了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
div{
height: 40px;
border: 1px solid #000;
}
li{
float: left;
width: 90px;
height: 40px;
margin-right: 10px;
background-color: gold;
/*文本居中*/
text-align: center;
}
</style>
</head>
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設(shè)計(jì)模式</li>
</ul>
</div>
<div>
<ul>
<li>學(xué)習(xí)方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>
圖片.png
1.2. 清除浮動(dòng)方法2(margin失效了)
clear:both;clear就是清除,both指的是左浮動(dòng)舍咖、右浮動(dòng)都要清除矩父。意思就是:清除別人對(duì)我的影響。這種方法有一個(gè)非常大的排霉、致命的問題窍株,margin失效了。如果用用方法一攻柠,高度height就會(huì)固定球订,因?yàn)槟鼙粌?nèi)容撐高,這也是為什么方法一用的少的原因
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
li{
float: left;
width: 120px;
height: 40px;
text-align: center;
background-color: orange;
}
.box2{
clear: both;
margin-top: 100px;//margin是失效的
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設(shè)計(jì)模式</li>
</ul>
</div>
<div class="box2">
<ul>
<li>學(xué)習(xí)方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>
1.3. 清除浮動(dòng)方法:隔墻法
1.3.1 外墻法:在兩部分浮動(dòng)元素中間瑰钮,建一個(gè)墻冒滩。隔開兩部分浮動(dòng),讓后面的浮動(dòng)元素浪谴,不去追前面的浮動(dòng)元素开睡。墻用自己的身體當(dāng)做了間隙
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.box1{
background-color: gold;
}
li{
float: left;
width: 120px;
height: 40px;
background-color: orange;
}
.cl{
clear: both;
}
.h8{
height: 2px;
_font-size:0;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設(shè)計(jì)模式</li>
</ul>
</div>
<div class="cl h8"></div>
<div class="box2">
<ul>
<li>學(xué)習(xí)方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>
圖片.png
1.3.2.內(nèi)墻法,外墻法雖然好用黄鳍,但是第一個(gè)div芥挣,還是沒有高度。如果我們現(xiàn)在想讓第一個(gè)div葫松,自動(dòng)的根據(jù)自己的兒子凶杖,撐出高度胁艰,那么可以使用內(nèi)墻法(內(nèi)墻法的本質(zhì):給沒有高的父親撐出高度)(推薦使用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.box1{
background-color: gold;
}
li{
float: left;
width: 120px;
height: 40px;
background-color: orange;
text-align: center;
}
.cl{
clear: both;
}
.h16{
height: 16px;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設(shè)計(jì)模式</li>
</ul>
<div class="cl h16"></div>
</div>
<div class="box2">
<ul>
<li>學(xué)習(xí)方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>
圖片.png
內(nèi)墻法的用途
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.content{
width: 900px;
margin: 0 auto;
background-color: yellow;
}
.content .ad{
float: left;
width: 100px;
height: 300px;
background-color: blue;
}
.content .news{
float: left;
width: 600px;
}
.cl{
clear: both;
}
</style>
</head>
<body>
<div class="content">
<div class="ad"></div>
<div class="news">
容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容
容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi).............
</div>
<div class="cl"></div>
</div>
</body>
</html>
a:沒有使用內(nèi)墻的時(shí)候,父容器高度撐不起來,不顯示黃色背景
圖片.png
b:使用內(nèi)墻腾么,父容器高度撐起來醋虏,顯示黃色背景
圖片.png
1.4.overflow:hidden;(推薦使用)
這個(gè)屬性的本意,就是將所有溢出盒子的內(nèi)容哮翘,隱藏掉颈嚼。但是,我們發(fā)現(xiàn)這個(gè)東西能夠用于浮動(dòng)的清除饭寺。我們知道阻课,一個(gè)父親,不能被自己浮動(dòng)的兒子撐出高度艰匙,但是限煞,如果這個(gè)父親加上了overflow:hidden;那么這個(gè)父親就能夠被浮動(dòng)的兒子撐出高度了员凝。這個(gè)現(xiàn)象署驻,不能解釋,就是瀏覽器的小偏方。并且,overflow:hidden;能夠讓margin生效。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
overflow: hidden;
border: 10px solid black;
}
.p1{
float: left;
width: 100px;
height: 150px;
background-color: red;
}
.p2{
float: left;
width: 100px;
height: 380px;
background-color: yellow;
}
.p3{
float: left;
width: 100px;
height: 120px;
background-color: blue;
}
</style>
</head>
<body>
<div>
<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>
</div>
</body>
</html>
a:不加overflow: hidden;父容器沒有被撐出高度
圖片.png
b:不加overflow: hidden;父容器被撐出高度
圖片.png
使用overflow清除浮動(dòng)的案例
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
li{
float: left;
width: 120px;
height: 40px;
background-color: orange;
text-align: center;
}
.box1{
overflow: hidden;
_zoom:1;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設(shè)計(jì)模式</li>
</ul>
</div>
<div class="box2">
<ul>
<li>學(xué)習(xí)方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>
a:加 overflow: hidden;
圖片.png
b:不加 overflow: hidden;
圖片.png
2.margin的塌陷現(xiàn)象
2.1.標(biāo)準(zhǔn)文檔流中跑揉,豎直方向的margin不疊加,以較大的為準(zhǔn)扮饶。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
border: 10px solid red;
overflow: hidden;
}
.p1{
width: 200px;
height: 100px;
background-color: orange;
margin-bottom: 30px;
float: left;
}
.p2{
width: 200px;
height: 100px;
background-color: orange;
margin-top: 50px;
float: left;
}
</style>
</head>
<body>
<div>
<p class="p1"></p>
<p class="p2"></p>
</div>
</body>
</html>
圖片.png
2.2.如果不在標(biāo)準(zhǔn)流岂丘,比如盒子都浮動(dòng)了,那么兩個(gè)盒子之間是沒有塌陷現(xiàn)象的:
圖片.png
2.3. 盒子居中margin:0 auto;
margin的值可以為auto寨蹋,表示自動(dòng)惊楼。當(dāng)left、right兩個(gè)方向,都是auto的時(shí)候氧秘,盒子居中了:
1 margin-left: auto;
2 margin-right: auto;
簡(jiǎn)寫為 margin:0 auto;
注意:
1) 使用margin:0 auto; 的盒子丸相,必須有width,有明確的width
2) 只有標(biāo)準(zhǔn)流的盒子,才能使用margin:0 auto; 居中谎脯。
也就是說葱跋,當(dāng)一個(gè)盒子浮動(dòng)了、絕對(duì)定位了源梭、固定定位了年局,都不能使用margin:0 auto;
3) margin:0 auto;是在居中盒子,不是居中文本咸产。
文本的居中矢否,要使用
1 text-align:center;
1 margin:0 auto; → 讓這個(gè)div自己在大容器中居中。
2 text-align: center; → 讓這個(gè)div內(nèi)部的文本居中脑溢。
普及一下知識(shí)僵朗,text-align還有
1 text-align:left; 沒啥用,因?yàn)槟J(rèn)居左
2 text-align:right; 文本居右
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 100px;
background-color: orange;
margin:50px auto;
text-align: center;
}
p{
width: 100px;
height: 100px;
background-color: green;
margin: 0 auto;
float: left;
}
</style>
</head>
<body>
<div>哈哈哈</div>
<p></p>
</body>
</html>
圖片.png
2.4. 善于使用父親的padding屑彻,而不是兒子的margin
如果父親沒有border验庙,那么兒子的margin實(shí)際上踹的是“流”,踹的是這“行”社牲。所以粪薛,父親整體也掉下來了,margin這個(gè)屬性,本質(zhì)上描述的是兄弟和兄弟之間的距離搏恤; 最好不要用這個(gè)marign表達(dá)父子之間的距離违寿。所以,我們一定要善于使用父親的padding熟空,而不是兒子的margin藤巢。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 250px;
padding-top: 50px;
background-color: orange;
}
p{
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
圖片.png
如果有邊框的話,也可以使用marginTop
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 250px;
/*padding-top: 50px;*/
background-color: orange;
border: 1px solid orange;
}
p{
width: 100px;
height: 100px;
margin-top: 50px;
background-color: green;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
圖片.png