HTML如何輕而易舉清除浮動(dòng)

動(dòng)的目的：把多個(gè)盒子放在一行上

清除浮動(dòng)的目的：解決父盒子高度為0的問題

清除浮動(dòng)，也稱閉合浮動(dòng)

注：本文不兼容IE6

未清除浮動(dòng)實(shí)現(xiàn)情況：

圖1

清除后：

圖2

原代碼：

復(fù)制代碼

<!DOCTYPE html>

<html>

<head>

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

</style>

</head>

<body>

</div>

</body>

</html>

復(fù)制代碼

具體方法：

1.額外標(biāo)簽法

在含浮動(dòng)標(biāo)簽后加兄弟盒子清除浮動(dòng)

例：

復(fù)制代碼

<!DOCTYPE html>

<html>

<head>

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

.clearbox{

clear:both;

}

</style>

</head>

<body>

</div>

</body>

</html>

復(fù)制代碼

缺點(diǎn)：添加了許多空div

2.給父盒子overflow:hidden

觸發(fā)bfc模式（該名詞不懂請谷歌/百度，初學(xué)者可暫時(shí)略過)，直接清除浮動(dòng)

復(fù)制代碼

<!DOCTYPE html>

<html>

<head>

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

overflow: hidden;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

.clearbox{

clear:both;

}

</style>

</head>

<body>

</div>

</body>

</html>

復(fù)制代碼

缺點(diǎn)：不可與position屬性配合使用

3.偽元素法

給父元素定義偽類:after(此處使用的是公共類clearfix）

復(fù)制代碼

.clearfix:after{

content:"";/*內(nèi)容為空*/

visibility:hidden;/*將元素隱藏，但是在網(wǎng)頁中該占的位置還是占著*/

display:block;/*變成塊級元素*/

height:0;

clear:both;/*清除浮動(dòng)*/

}

復(fù)制代碼

具體代碼：

復(fù)制代碼

<!DOCTYPE html>

<html>

<head>

.clearfix:after{

content:"";/*內(nèi)容為空*/

visibility:hidden;/*將元素隱藏，但是在網(wǎng)頁中該占的位置還是占著*/

display:block;/*變成塊級元素*/

height:0;

clear:both;/*清除浮動(dòng)*/

}

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

.clearbox{

clear:both;

}

</style>

</head>

<body>

</div>

</body>

</html>

復(fù)制代碼

缺點(diǎn)：IE8以上和非IE瀏覽器才支持

4.雙偽元素法

給父類加上偽類:before和:after

復(fù)制代碼

.clearfix:before,.clearfix:after{

content:"";

display:table;

}

.clearfix:after{

clear:both;

}

復(fù)制代碼

具體代碼：

復(fù)制代碼

<!DOCTYPE html>

<html>

<head>

.clearfix:before,.clearfix:after{

content:"";

display:table;

}

.clearfix:after{

clear:both;

}

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

.clearbox{

clear:both;

}

</style>

</head>

<body>

</div>

</body>

</html>

復(fù)制代碼

附：

對于上述4種方法，優(yōu)先推薦方法3和4，當(dāng)然1和2也可，可根據(jù)具體情況使用。

還有幾種亂七八糟的清除浮動(dòng)方法，但是缺點(diǎn)多，故不提起.

最后你覺得我們的文章對你有幫助，歡迎關(guān)注我，可以私信我：久伴，領(lǐng)取學(xué)習(xí)資料，在評論下方可以關(guān)注我的學(xué)習(xí)群，你可以隨時(shí)在上面向我們提問，把你在學(xué)習(xí)前端過程中所遇到的問題發(fā)給我們。我們每天都會(huì)按時(shí)回復(fù)大家的每一個(gè)問題，希望久伴可以伴隨你從入門到專家。

動(dòng)

浮動(dòng)是為了元素標(biāo)簽的并排顯示問題。

我們在瀏覽網(wǎng)頁的時(shí)候，經(jīng)常會(huì)看到幾個(gè) div 塊是可以并排顯示的，浮動(dòng)就是解決這樣問題的方法之一。

float屬性有以下的值

float: left; 左浮動(dòng)

float: right 右浮動(dòng)

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

浮動(dòng)主要針對的是并排顯示的盒子而言。
在一個(gè)父容器的盒子里，兄弟元素之間要浮動(dòng)必須都浮動(dòng)。
父容器必須要有一個(gè)足夠的寬度，否則不足以使得各個(gè)子元素之間并排展示。
一個(gè)父容器的盒子內(nèi)，兄弟元素會(huì)按照順序貼靠，如果是左浮動(dòng)，就往左貼合；如果是右浮動(dòng)，就往右貼合。如果發(fā)現(xiàn)貼合的盒子后沒有足夠的空間，則會(huì)在尋找前一個(gè)兄弟元素進(jìn)行貼靠。直到空間合適為止。
浮動(dòng)的元素已經(jīng)脫離了標(biāo)準(zhǔn)的HTML文檔流，不再區(qū)分塊級元素、行內(nèi)元素并且一律能設(shè)置寬度和高度，即使它是span標(biāo)簽或者a標(biāo)簽

一個(gè)浮動(dòng)的例子

<!--一個(gè)浮動(dòng)的例子-->
<style>


    .box1 {
        width: 600px;
        height: 200px;
        border: 1px solid #000;
    }


    .box1 .con1 {
        width: 200px;
        height: 200px;
        background-color: orange;
        float: left;
    }


    .box1 .con2 {
        width: 200px;
        height: 200px;
        background-color: blue;
        float: left;
    }


    .box1 .con3 {
        width: 201px;
        height: 200px;
        background-color: yellowgreen;
        float: left;
    }
</style>
<div class="box1">
        <div class="con1"></div>
        <div class="con2"></div>
        <div class="con3"></div>
</div>

一個(gè)順序貼靠的例子

<!--  一個(gè)順序貼靠的例 子-->
<!-- 以下代碼中 兄弟元素 con1， con2， con3 之間會(huì)進(jìn)行順序貼靠-->
<!-- con3 在貼靠 con2 的時(shí)候，發(fā)現(xiàn)父容器的寬度只能是400px, 分別被con1 和 con2 占據(jù)， 所以con3 會(huì)找 cont1 貼靠，最終con3 位于 con1右邊， con2下邊 -->


<style>


  .box1 {
      width: 400px;
      height: 200px;
      border: 1px solid #000;
  }


  .box1 .con1 {
      width: 200px;
      height: 200px;
      background-color: orange;
      float: left;
  }


  .box1 .con2 {
      width: 200px;
      height: 100px;
      background-color: blue;
      float: left;
  }


  .box1 .con3 {
      width: 200px;
      height: 100px;
      background-color: yellowgreen;
      float: left;
  }
</style>
<div class="box1">
  <div class="con1"></div>
  <div class="con2"></div>
  <div class="con3"></div>
</div>

清除浮動(dòng)

清除浮動(dòng)是為了不影響設(shè)置浮動(dòng)標(biāo)簽的后續(xù)的標(biāo)簽的布局展示。

因?yàn)椋谝粋€(gè)父容器中，子元素浮動(dòng)了，脫離了標(biāo)準(zhǔn)文檔流，不在占用之前的位置，會(huì)導(dǎo)致無法撐開沒有設(shè)置高度的父元素；從而導(dǎo)致后續(xù)的結(jié)構(gòu)擠壓，造成整個(gè)頁面布局的混亂。

給父元素加個(gè)高度。在那些明確知道父容器高度的情況下，可以使用。

<style>
  * {
    margin: 0;
    padding: 0;
  }


  div {
    height: 100px;
  }
  p {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    background-color: red;
  }
</style>


<body>
  <div>
    <p></p>
    <p></p>
  </div>


  <div>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>

后續(xù)元素增加 clear:both ,清除前面元素對自己的影響。

<style>
    * {
        margin: 0;
        padding: 0;
    }


    .box2 {
        margin-top: 20px;
        clear: both;
    }
    p {
        float: left;
        width: 100px;
        height: 100px;
        margin-right: 20px;
        background-color: red;
    }
</style>


<body>
<div>
    <p></p>
    <p></p>
</div>


<div class="box2">
    <p></p>
    <p></p>
    <p></p>
</div>
</body>

浮動(dòng)的父容器添加后續(xù)偽元素，clear:both ，清除浮動(dòng)對后續(xù)元素的影響(推薦方式)。

<style>
  * {
      margin: 0;
      padding: 0;
  }


  .cleafix::after {
      content: '';
      clear: both;
      display: block
  }


  p {
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 20px;
      background-color: red;
  }
</style>


<body>


<div class="cleafix">
  <p></p>
  <p></p>
</div>


<div class="cleafix">
  <p></p>
  <p></p>
  <p></p>
</div>
</body>

額外的空標(biāo)簽，在浮動(dòng)元素的父盒子之后添加一個(gè)空標(biāo)簽，空標(biāo)簽上添加 clear:both 屬性。

<style>
* {
  margin: 0;
  padding: 0;
}


.clearboth {
  clear: both;
}


p {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 20px;
  background-color: red;
}
</style>


<body>
<div>
<p></p>
<p></p>
</div>


<div class="clearboth"></div>


<div>
<p></p>
<p></p>
<p></p>
</div>
</body>

浮動(dòng)元素的父容器添加 overflow:hidden , 使得子元素的浮動(dòng)只能作用在父容器內(nèi)。

除浮動(dòng)

上期跟大家分享了浮動(dòng)，這些咱們講清除浮動(dòng)

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

因?yàn)楦?dòng)導(dǎo)致父元素的塌陷，所以要清除浮動(dòng)

清除浮動(dòng) CSS代碼 clear:left right both none；

子級辦法

子級最后添加空標(biāo)簽

父級辦法

加高問題：擴(kuò)展性不好

inline-block 清浮動(dòng)方法問題：margin:auto;失效

overflow:hidden 清浮動(dòng)方法；問題：要配合寬度

after偽元素內(nèi)部末尾添加內(nèi)容時(shí)下主流

.clearfix{zoom:1;}.

clearfix：after{content:'';display:block;clear:both;}

min-width 設(shè)置元素的最小寬度

max-width 設(shè)置元素的最大寬度

獲取詳細(xì)的講解可以關(guān)注私信我，我免費(fèi)分享一套網(wǎng)站前端的視頻教程給大家。

最后歡迎大神在留言區(qū)吐槽

在線咨詢

上一篇：HTML ul li 橫排居中排列的方法，三步驟及實(shí)例
下一篇：SemanticKernel之使用結(jié)構(gòu)化Prompt

您的項(xiàng)目需求

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

整合營銷服務(wù)商

HTML如何輕而易舉清除浮動(dòng)

動(dòng)

清除浮動(dòng)

除浮動(dòng)

您的項(xiàng)目需求