CSS怎么實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)

這篇文章主要介紹CSS怎么實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)是一家專注于成都做網(wǎng)站、成都網(wǎng)站建設(shè)與策劃設(shè)計(jì),涪城網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:涪城等地區(qū)。涪城做網(wǎng)站價(jià)格咨詢:18982081108

浮動(dòng)基本介紹

  • 在標(biāo)準(zhǔn)文檔流中元素分為2種，塊級(jí)元素和行內(nèi)元素，如果想讓一些元素既要有塊級(jí)元素的特點(diǎn)也同時(shí)保留行內(nèi)元素特點(diǎn)，只能讓這些元素脫離標(biāo)準(zhǔn)文檔流即可。

  • 浮動(dòng)可以讓元素脫離標(biāo)準(zhǔn)文檔流，可以實(shí)現(xiàn)讓多個(gè)元素排在同一行，并且可以設(shè)置寬高度。

  • 其實(shí)浮動(dòng)是通過float屬性來實(shí)現(xiàn)的。

  • float屬性值說明表：    

屬性值描述
left設(shè)置元素向左浮動(dòng)。
right設(shè)置元素向右浮動(dòng)。

右浮動(dòng)實(shí)踐

  • 讓我們進(jìn)入右浮動(dòng)的實(shí)踐，實(shí)踐內(nèi)容如：將class屬性值為.box1元素設(shè)置為右浮動(dòng)。

  • 在進(jìn)入有浮動(dòng)實(shí)踐之前我們先看看要浮動(dòng)元素結(jié)構(gòu)是什么。

代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮動(dòng)</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

結(jié)果圖

CSS怎么實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)

為什么結(jié)果圖是一條邊框線呢？因?yàn)樵?code>div標(biāo)簽中還沒有內(nèi)容呢，現(xiàn)在我們將子div標(biāo)簽設(shè)置寬高度為100px像素并且添加背景顏色。

代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮動(dòng)</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

結(jié)果圖

CSS怎么實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)

  • 為什么會(huì)排列為3行呢，因?yàn)?個(gè)div標(biāo)簽都是塊級(jí)元素。

  • 現(xiàn)在我們將class屬性值為.box1的元素設(shè)置為右浮動(dòng)。

代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮動(dòng)</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:right;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

結(jié)果圖

CSS怎么實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)

注意：現(xiàn)在我們發(fā)現(xiàn)calss屬性值為.box元素高度變矮了，這就說明了（浮動(dòng)元素它已經(jīng)脫離了標(biāo)準(zhǔn)文檔流，不再占用空間了）、并且向右浮動(dòng)，浮動(dòng)到自身的父元素的邊緣位置就停止了浮動(dòng)。

左浮動(dòng)實(shí)踐

讓我們進(jìn)入左浮動(dòng)的實(shí)踐，實(shí)踐內(nèi)容如：將class屬性值為.box1元素設(shè)置為左浮動(dòng)。

代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮動(dòng)</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:left;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

結(jié)果圖

CSS怎么實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)

  • 我們先理解浮動(dòng)的原理之后再解釋下class屬性值為.box2元素看不見的原因。

  • 現(xiàn)在筆者給大家看2張實(shí)踐結(jié)果圖如：

結(jié)果圖A

CSS怎么實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)

結(jié)果圖B

CSS怎么實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)

  • 通過這2張結(jié)果圖我們可以把浮動(dòng)簡(jiǎn)單的理解為“漂”舉例：

  • 假設(shè)class屬性值為.box是一個(gè)池塘，3個(gè)子元素都是能夠漂浮在池塘水面上的東西，現(xiàn)在我們將calss屬性值為.box1元素浮動(dòng)起來，漂在池塘水面上，是不是就不再占用池塘內(nèi)的空間了。

  • 既然我們理解為“漂”它一定是漂浮在池塘水面之上，但是沒有浮動(dòng)的元素在池塘水面之內(nèi)，所以class屬性值為.box2元素看不見，并不代表它不存在只是被class屬性值為.box1元素給遮擋住了，現(xiàn)在我們將class屬性值為.box2元素寬度設(shè)置為150px像素。

代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮動(dòng)</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:left;
       }
       .box2{
         width: 150px;
         height: 100px;
         background-color: #0f0;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

結(jié)果圖

CSS怎么實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)

注意：事實(shí)證明class屬性值為.box2元素是存在的。

下面我們將calss屬性值為.box2元素設(shè)置為左浮動(dòng)看看有什么不一樣的效果

代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮動(dòng)</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:left;
       }
       .box2{
         width: 150px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

結(jié)果圖

CSS怎么實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)

  • 但是class屬性值為.box2的元素左浮動(dòng)并沒有左浮動(dòng)到本身父元素的邊緣位置，為什么在class屬性值為.box1后面呢？因?yàn)楦冈匾呀?jīng)有了浮動(dòng)的子元素后面的子元素在浮動(dòng)就浮動(dòng)到前面浮動(dòng)的元素之后。

  • 現(xiàn)在我們將class屬性值為.box3的元素設(shè)置為左浮動(dòng)，看看有什么不一樣的效果。

代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮動(dòng)</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float:left;
       }
       .box2{
         width: 150px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
         float: left;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

結(jié)果圖

CSS怎么實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)

注意：浮動(dòng)元素浮動(dòng)以后，其父元素不再將浮動(dòng)的子元素包裹在父元素之內(nèi)，所以結(jié)果圖出現(xiàn)一條黑色的邊框線，若有不明白的看第一個(gè)實(shí)踐內(nèi)容。

將行內(nèi)元素設(shè)置浮動(dòng)

  • 如果我們給行內(nèi)元素設(shè)置了浮動(dòng)，行內(nèi)元素就擁有了塊級(jí)元素的特點(diǎn)。

  • 讓我們進(jìn)入行內(nèi)元素設(shè)置浮動(dòng)實(shí)踐，實(shí)踐內(nèi)容如：將div標(biāo)簽中的span標(biāo)簽設(shè)置為左浮動(dòng)。

  • 在設(shè)置左浮動(dòng)之前我們先看看給span標(biāo)簽設(shè)置寬高度和背景顏色有什么效果。

代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮動(dòng)</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
       
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
       
       }
    </style>
</head>
  
<body>
  <div class="box">
    <span class="box1">微笑是最初的信仰1</span>
    <span class="box2">微笑是最初的信仰2</span>
    <span class="box3">微笑是最初的信仰3</span>
  </div>
</body>
</html>

結(jié)果圖

CSS怎么實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)

  • 現(xiàn)在發(fā)現(xiàn)我們給span標(biāo)簽設(shè)置了寬高度為100px像素并沒有生效，因?yàn)楝F(xiàn)在span標(biāo)簽還是行內(nèi)元素。

  • 現(xiàn)在我們給span標(biāo)簽設(shè)置左浮動(dòng)，然后我們?cè)诳纯葱Ч绾巍?/p>

代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮動(dòng)</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float: left;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
        float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
        float: left;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <span class="box1">微笑是最初的信仰1</span>
    <span class="box2">微笑是最初的信仰2</span>
    <span class="box3">微笑是最初的信仰</span>
  </div>
</body>
</html>

結(jié)果圖

CSS怎么實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)

注意：行內(nèi)元素設(shè)置為浮動(dòng)之后就擁有了塊級(jí)元素的特點(diǎn)。

設(shè)置浮動(dòng)總結(jié)

  • 浮動(dòng)的特點(diǎn)如：

  • 浮動(dòng)元素脫離了標(biāo)準(zhǔn)的文檔流，不再占用父元素的任何空間。

  • 浮動(dòng)元素比標(biāo)準(zhǔn)文檔流的元素層級(jí)要高，會(huì)將標(biāo)準(zhǔn)文檔流的元素遮擋住。

  • 浮動(dòng)元素會(huì)向左浮動(dòng)或向右浮動(dòng)。浮動(dòng)元素會(huì)遇到父元素的邊緣就停止了浮動(dòng)。

  • 浮動(dòng)元素會(huì)遇到已經(jīng)有了浮動(dòng)的元素，后者會(huì)浮動(dòng)到前者之后就停止了浮動(dòng)。

  • 浮動(dòng)元素浮動(dòng)之后就脫離了父元素，并且父元素不再包裹浮動(dòng)的元素。

  • 行內(nèi)元素設(shè)置為浮動(dòng)，就擁有了塊級(jí)元素的特點(diǎn)。

為什么要清除浮動(dòng)呢？

  • 因?yàn)楦?dòng)的元素會(huì)影響到下面元素，具體看實(shí)踐結(jié)果圖大家就明白了。

  • class屬性值為.box元素的子類元素沒有浮動(dòng)前的效果實(shí)踐。

代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮動(dòng)</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
        
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
        
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
         
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <h2>清除浮動(dòng)</h2>
</body>
</html>

結(jié)果圖

CSS怎么實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)

class屬性值為.box元素的子元素左浮動(dòng)之后影響到下面的元素排版布局實(shí)踐。

代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮動(dòng)</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float: left;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
          float: left;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <h2>清除浮動(dòng)</h2>
</body>
</html>

結(jié)果圖

CSS怎么實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)

現(xiàn)在大家應(yīng)該明白了為什么要清除浮動(dòng)了，有浮動(dòng)就必須清除浮動(dòng)，因?yàn)樯厦娴脑卦O(shè)置了浮動(dòng)就會(huì)影響到下面元素排版布局。

清除浮動(dòng)有3種方式

第一種方式

  • 給浮動(dòng)的元素父元素設(shè)置一個(gè)固定的高度，從視覺上看到浮動(dòng)的元素在父元素包裹之內(nèi)。

  • 我們給浮動(dòng)元素的父元素設(shè)置一個(gè)固定600px像素的高度，一起來看看效果如何。

代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮動(dòng)</title>
    <style>
       .box{
         width: 600px;
         height: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float: left;
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
          float: left;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <h2>清除浮動(dòng)</h2>
</body>
</html>

結(jié)果圖

CSS怎么實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)

這樣是解決了下面元素排版布局問題，但是筆者不推薦這么做，因?yàn)楦叨仁怯勺釉氐膬?nèi)容撐起來的高度，而不是我們給的固定高度。

第二種方式

其實(shí)在CSS中也有清除浮動(dòng)的屬性，清除浮動(dòng)屬性名為clear。

clear屬性值說明表 

 
屬性值描述
left清除左側(cè)浮動(dòng)元素。
right清除右側(cè)浮動(dòng)元素。
both清除左右側(cè)浮動(dòng)元素。

  • 要使用這個(gè)clear屬性必須創(chuàng)建一個(gè)新的div元素，創(chuàng)建新的div元素不能放置任何內(nèi)容，它只能做一個(gè)件事情，那就是清除浮動(dòng)并且將這個(gè)新創(chuàng)建的div元素放在最后一個(gè)浮動(dòng)元素的后面才會(huì)生效。

  • 左右清除浮動(dòng)的屬性值筆者在這里就不一一實(shí)踐了，一般我們就用both屬性值就可以了，左右清除浮動(dòng)，干嘛還要計(jì)較它是左浮動(dòng)或右浮動(dòng)呢，直接清除左右浮動(dòng)就ok了。

  • 具體的看我們實(shí)踐的結(jié)果圖。

代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮動(dòng)</title>
    <style>
       .box{
         width: 600px;
         border: 1px solid #000;
       }
       .box1{
         width: 100px;
         height: 100px;
         background-color: #f00;
         float: left;
         
       }
       .box2{
         width: 100px;
         height: 100px;
         background-color: #0f0;
         float: left;
       }
       .box3{
         width: 100px;
         height: 100px;
         background-color: #00f;
          float: left;
       }
       .clear{
         clear: both;
       }
    </style>
</head>
  
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="clear"></div>
  </div>
  <h2>清除浮動(dòng)</h2>
</body>
</html>

結(jié)果圖

CSS怎么實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)

注意：這才是我們真正想要的結(jié)果，并且從視覺上來看浮動(dòng)的元素包裹在父元素之內(nèi)的效果。

第三種方式

  • 使用屬性為overflow并且屬性值為hidden來清除浮動(dòng)，必須將這個(gè)屬性設(shè)置在浮動(dòng)元素的父元素身上。

  • 給大家普及下屬性為overflow并且屬性值為hidden，它原意是用來將溢出的部分內(nèi)容進(jìn)行隱藏，但是它還可以清除浮動(dòng)。

  • 筆者先將內(nèi)容溢出然后在隱藏溢出的內(nèi)容，那我們一起來看看唄。

代碼塊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>溢出內(nèi)容進(jìn)行隱藏</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            border: 1px solid #000;
            
        }
    </style>
</head>
<body>
    <div>
        微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
        微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
        微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
        
    </div>
</body>
</html>

結(jié)果圖

CSS怎么實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)

下面筆者將溢出的內(nèi)容進(jìn)行隱藏。

代碼塊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>溢出內(nèi)容進(jìn)行隱藏</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            border: 1px solid #000;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>
        微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
        微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
        微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
        
    </div>
</body>
</html>

結(jié)果圖

CSS怎么實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)

  • 使用屬性為overflow并且屬性值為hidden來清除浮動(dòng)。

  • 清除浮動(dòng)之前我們先看看結(jié)構(gòu)是如何的。

代碼塊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮動(dòng)</title>
    <style>
       ul{
           list-style: none;
          
       }
       ul li{
           float: left;
           border: 1px solid red;
       }
    </style>
</head>
<body>
    <ul>
        <li>微笑是最初的信仰1</li>
        <li>微笑是最初的信仰2</li>
        <li>微笑是最初的信仰3</li>
        <li>微笑是最初的信仰4</li>
        <li>微笑是最初的信仰5</li>
        <li>微笑是最初的信仰6</li>
        <li>微笑是最初的信仰7</li>
        <li>微笑是最初的信仰8</li>
    </ul>
</body>
</html>

結(jié)果圖

CSS怎么實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)

注意：在這里筆者還沒有給浮動(dòng)元素清除浮動(dòng)呢，大家可以明顯的看到ul標(biāo)簽高度為0。

清除浮動(dòng)實(shí)踐

代碼塊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮動(dòng)</title>
    <style>
       ul{
           list-style: none;
           overflow: hidden;
       }
       ul li{
           float: left;
           border: 1px solid red;
       }
    </style>
</head>
<body>
    <ul>
        <li>微笑是最初的信仰1</li>
        <li>微笑是最初的信仰2</li>
        <li>微笑是最初的信仰3</li>
        <li>微笑是最初的信仰4</li>
        <li>微笑是最初的信仰5</li>
        <li>微笑是最初的信仰6</li>
        <li>微笑是最初的信仰7</li>
        <li>微笑是最初的信仰8</li>
    </ul>
</body>
</html>

結(jié)果圖

CSS怎么實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)

現(xiàn)在我們很清楚的看到ul標(biāo)簽高度為23px像素，為什么要使用：屬性為overflow并且屬性值為hidden來清除浮動(dòng)，因?yàn)?code>ul標(biāo)簽中只能使用li標(biāo)簽元素不能使用其它元素，所以屬性為overflow并且屬性值為hidden來清除浮動(dòng)是最好不過啦。

以上是“CSS怎么實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前文章：CSS怎么實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)
當(dāng)前地址：http://muchs.cn/article44/gpphhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、定制網(wǎng)站、品牌網(wǎng)站制作、域名注冊(cè)、營(yíng)銷型網(wǎng)站建設(shè)、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化