ul 下的li標簽都浮動，那么ul的高度用兩個css搞定

ul加入zoom:1;overflow:hidden;

ul {

zoom:1;

overflow:hidden;

}

動是css里面布局用的最多的屬性。

一個span標簽不需要轉(zhuǎn)成塊級元素, 就能夠設(shè)置寬度、高度了。所以能夠證明一件事兒, 就是所有標簽已經(jīng)不區(qū)分行內(nèi)、塊了。

也就是說, 一旦一個元素浮動了, 那么, 將能夠并排了, 并且能夠設(shè)置寬高了, 無論它原來是個div還是個span。

浮動的性質(zhì)：脫標、貼邊、字圍、收縮。

浮動的元素脫標

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.box1{
    float: left;
    width: 300px;
    height: 400px;
    background-color: yellowgreen;
}
.box2{
    float: left;
    width: 400px;
    height: 400px;
    background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

兩個元素并排了, 并且兩個元素都能夠設(shè)置寬度、高度了。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
span{
    float: left;
    width: 200px;
    height: 200px;
    background-color: orange;
}
</style>
</head>
<body>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
</body>
</html>

一個span標簽不需要轉(zhuǎn)成塊級元素, 就能夠設(shè)置寬度、高度了。所以能夠證明一件事兒, 就是所有標簽已經(jīng)不區(qū)分行內(nèi)、塊了。

也就是說, 一旦一個元素浮動了, 那么, 將能夠并排了, 并且能夠設(shè)置寬高了, 無論它原來是個div還是個span。

浮動的元素互相貼靠

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
body{
    font-size: 60px;
}
.box1{
    float: left;
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
}
.box2{
    float: left;
    width: 120px;
    height: 220px;
    background-color: gold;
}
.box3{
    float: left;
    width: 340px;
    height: 300px;
    background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>

浮動的元素有"字圍"效果

<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">
div{
float: left;
width: 344px;
height: 516px;
background-color: orange;
}
</style>
</head>
<body>
<div>
<img src="images/1.jpg" alt="" />
</div>
<p>123文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文</p>
</body>
</html>

div擋住了p, 但是p中的文字不會被擋住, 形成"字圍"效果。如果將p標記換成div, 則不會有"字圍"效果。

詳細案例見：CSS|實例|圖文混排

收縮：一個浮動的元素, 如果沒有設(shè)置width, 那么將自動收縮為文字的寬度(這點非常像行內(nèi)元素)。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
float: left;
background-color: gold;
}
</style>
</head>
<body>
<div>我是文字</div>
</body>
</html>

浮動的清除

實驗：現(xiàn)在有兩個div, div身上沒有任何屬性。每個div中都有l(wèi)i, 這些li都是浮動的。

<html>
<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è)計模式</li>
</ul>
</div>
<div>
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

我們本以為這些li, 會分為兩排, 但是, 第二組中的第1個li, 去貼靠第一組中的最后一個li了。

第二個div中的li, 去貼第一個div中最后一個li的邊了。

原因就是因為div沒有高度, 不能給自己浮動的孩子們, 一個容器。

清除浮動方法1：給浮動的元素的祖先元素加高度。缺陷: 只限于父元素高度確定的情況下。

如果一個元素要浮動, 那么它的祖先元素一定要有高度。高度的盒子, 才能關(guān)住浮動。

解決方法:

<html>
<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: 50px; /* 為父元素設(shè)置高度 */
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è)計模式</li>
</ul>
</div>
<div>
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

清除浮動方法2：clear:both;

網(wǎng)頁制作中, 高度height很少出現(xiàn)。為什么? 因為能被內(nèi)容撐高! 那也就是說, 剛才我們講解的方法1, 工作中用的很少。

腦弄大開：能不能不寫height, 也把浮動清除了呢? 也讓浮動之間, 互不影響呢?

clear:both;

clear就是清除, both指的是左浮動、右浮動都要清除。意思就是：清除別人對我的影響。

這種方法有一個非常大的、致命的問題, margin失效了。

<html>
<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;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設(shè)計模式</li>
</ul>
</div>
<div class="box2">
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

清除浮動方法3：隔墻法

<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;
}
.h8{
height: 8px;
_font-size:0;
}
.h10{
height: 10px;
_font-size:0;
}
.h12{
height: 12px;
_font-size:0;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設(shè)計模式</li>
</ul>
</div>

<div class="cl h8"></div>
<div class="box2">
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

墻! <div class="cl h18"></div>

這個墻, 隔開了兩部分浮動, 兩部分浮動, 互不影響。

近些年, 有演化出了"內(nèi)墻法"：

<html>
<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è)計模式</li>
</ul>
<div class="cl h16"></div>
</div>
<div class="box2">
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

內(nèi)墻法本質(zhì)-給沒有高的父親撐出高

因為一個父元素不可能被浮動的子元素撐出高度, 解決的方法：內(nèi)墻法

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
background-color: blue;
}
p{
float: left;
width: 100px;
height: 100px;
background-color: green;
}
.cl{ /* 如果沒有清除浮動 , 則父元素的盒子沒有高度, <div>盒子只是一條線*/
clear: both;
}
</style>
</head>
<body>
<div>
<p></p>
<div class="cl"></div>
</div>
</body>
</html>

清除浮動方法4：overflow:hidden;

overflow就是"溢出"的意思, hidden就是"隱藏"的意思。

<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">
div{
width: 300px;
height: 300px;
border: 1px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<div>內(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>
</body>
</html>

本意就是清除溢出到盒子外面的文字。但是, 前端開發(fā)工程師又發(fā)現(xiàn)了, 能做偏方。

一個父親不能被自己浮動的兒子，撐出高度。但是, 只要給父親加上overflow:hidden; 那么, 父親就能被兒子撐出高了。這是一個偏方。

div{
    width: 400px;
    border: 10px solid black;
    overflow: hidden;
}

<html>
<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>

浮動清除方法5: 利用偽元素清除浮動

我們知道css中最重要的就是浮動了，一張網(wǎng)頁結(jié)構(gòu)布局，用的最多的就是浮動了，現(xiàn)在大多數(shù)的網(wǎng)站網(wǎng)頁結(jié)構(gòu)都是浮動布局了，不像早些年的表格布局。所以學好浮動對我們的開發(fā)很重要。

浮動是什么？可能很多人的理解都不一樣，我們來看看w3c對浮動的解釋是什么

大多數(shù)小伙伴聽得最多的可能就是浮動流，下面我們就來講講什么是浮動流以及清除浮動。

首先，我們知道，在一張網(wǎng)頁中的正常布局流向（排列方式）都是從左到右，從上到下的方式排列。這個我們稱之為標準文檔流。那什么是浮動流呢？

浮動浮動浮動 ==> 因為有個浮字，我們可以理解為浮起來了一樣。就好比標準文檔流在地下排流，浮動流在天空上排流。簡單看個例子。

這是兩個正常排列的div，div獨占一行，就不用多說了吧。然后我們給小的方塊加一個浮動

然后我們再看效果

然后我們就看到大方塊在小方塊下面，因為小方塊跑天上去了，它就不占據(jù)原來的位置，會把那個位置空出來，所以大方塊會竄上去，就看起來兩個方塊重疊了。

在看另外一個例子，子級浮動，父級高度撐不開的問題，這也是浮動帶來的一個不好的影響，平常寫代碼的時候會經(jīng)常遇到這個。

一個ul標簽，下面兩個li標簽，然后給ul加一個邊框便于觀看。

保存運行看下正常效果

然后我們給li標簽浮動

效果如下

這下我們看到ul的高度沒有了，上下邊框緊緊挨著，這就是剛剛上面說的浮起來的狀況，因為子級li標簽浮動起來了，它不占據(jù)原來的位置，它已經(jīng)在天上了，所以它的父級ul標簽包不住它，撐不起來高度，才會產(chǎn)生這種狀況。

那我們要怎么解決這種現(xiàn)象呢。就是清除浮動。

大致分為4種方案：

1、在并列的子元素，最后加一個元素，給他加clear：both

2、給父子加一個class： clearfix

.clearfix::after{

content: '';

clear: both;

display: block;

}

3、讓父級觸發(fā)BFC效果

position:absolute

display:inline-block

float：left|right

overflow：hidden

4、如何浮動的父級本身就是浮動元素嗎，那么不用清除浮動了

咱們就來給父級觸發(fā)BFC效果看一下。

看效果

現(xiàn)在父級就把子級包裹住了，高度也有了。

有什么問題可以點一下關(guān)注，私信小編。

在線咨詢

上一篇：傳統(tǒng)ISV進場，MolyApp的HTML5生意是讓商戶、明星商城快速構(gòu)建線上營銷和支付渠道
下一篇：11.HTML圖片格式與優(yōu)化

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

ul 下的li標簽都浮動，那么ul的高度用兩個css搞定

您的項目需求