那些年使用過(guò)的清除浮動(dòng)的方法

AbnerMing 發(fā)布于2019-04-23 11:40 / 3175人閱讀

摘要：浮動(dòng)使元素框向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂Ｓ捎诟?dòng)框脫離了文檔的普通流，所以文檔的普通流中的框表現(xiàn)得就像浮動(dòng)框不存在一樣。

浮動(dòng)使元素框向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>

由于浮動(dòng)框脫離了文檔的普通流，所以文檔的普通流中的框表現(xiàn)得就像浮動(dòng)框不存在一樣。

這段代碼：

  <style>
    .parent {
      width: 500px;
      margin: 0 auto;
    }
    .left {
      float: left;
      list-style: none;
      padding-right: 5px;
    }
  style>

<div class="parent">
  <ul class="div0">
    <li class="left">111li>
    <li class="left">222li>
    <li class="left">333li>
  ul>
  <div class="div1">這是第一個(gè)內(nèi)容div>
  <div class="div2">這是第二個(gè)內(nèi)容div>
  <div class="div3">這是第二個(gè)內(nèi)容div>
div>

對(duì)三個(gè)li進(jìn)行左浮動(dòng)。我們預(yù)想的是div0的內(nèi)容在同一行顯示，其他的各自展示在一行中。然而事實(shí)是，div1緊跟在div0后，這便是浮動(dòng)造成的影響。

浮動(dòng)解決方法：

1、浮動(dòng)元素父級(jí)設(shè)高法

也就是給div0設(shè)置一個(gè)高度。來(lái)看看效果：

.div0 { height: 30px; }

很好的解決了問(wèn)題，不過(guò)平時(shí)我們?cè)谑褂弥胁荒芫_的得出元素的高度，所以這個(gè)方法不太實(shí)用。

2、空div清除浮動(dòng)

也就是給浮動(dòng)元素后面加一個(gè)空的div標(biāo)簽，設(shè)置clear屬性來(lái)清除浮動(dòng)：

<style>
  .clear { clear: both }
style>

<div class="parent">
  <ul class="div0">
    <li class="left">111li>
    <li class="left">222li>
    <li class="left">333li>
  ul>
  <div class="clear">div>
  <div class="div1">這是div1div>
  <div class="div2">這是div2div>
  <div class="div3">這是div3div>
div>

clear 屬性定義了元素的哪邊不允許出現(xiàn)浮動(dòng)元素,這里也可以設(shè)置為clear: left。在這里直接給div1一個(gè)clear樣式能起到同樣的效果。

3、浮動(dòng)元素父級(jí)設(shè)overflow:hidden/auto法

和第一種方法一樣，只需要給div0加一個(gè)overflow屬性：

.div0 {
  overflow: hidden;
  *zoom: 1 // 兼容ie7/6,*號(hào)表示只在ie7以下版本生效
}

overflow本意是對(duì)溢出元素框的內(nèi)容做處理。在這里用，剛好可以撐開(kāi)父元素的高度。

4、浮動(dòng)元素父級(jí)設(shè)display:inline-block

.div0 { display: inline-block}

這種方式有種缺點(diǎn)，會(huì)使margin: 0 auto居中方式失效。

給div0增加一個(gè)寬度并且設(shè)置居中,并且用上面三種方式之一清除浮動(dòng)后效果是這樣:

   .div0 {
      overflow: auto;   //清除浮動(dòng)
      width: 100px;
      margin: 0 auto;  // 居中
    }

但是使用display: inline-block清除浮動(dòng)，margin居中失效：

   .div0 {
      display: inline-block;   //清除浮動(dòng)
      width: 100px;
      margin: 0 auto;  // 居中
    }

5、偽類(lèi)after清除浮動(dòng)法

目前最常用也最好用的清除浮動(dòng)方法。ie需要設(shè)置zoom觸發(fā)hasLayout。

<style>
   .clearFix {
      *zoom: 1
    }

    .clearFix:after {
      display: block;
      content: "";
      width: 0;
      height: 0;
      font-size: 0;
      clear: both;
      visibility: hidden;
      overflow: hidden
    }
style>

<div class="parent">
  <ul class="div0 clearFix">
    <li class="left">111li>
    <li class="left">222li>
    <li class="left">333li>
  ul>
  <div class="div1">這是div1div>
  <div class="div2">這是div2div>
  <div class="div3">這是div3div>
div>