亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

那些年使用過的清除浮動的方法

AbnerMing / 3222人閱讀

摘要：浮動使元素框向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框脫離了文檔的普通流，所以文檔的普通流中的框表現(xiàn)得就像浮動框不存在一樣。

浮動使元素框向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

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

這段代碼：

  <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">這是第一個內容div>
  <div class="div2">這是第二個內容div>
  <div class="div3">這是第二個內容div>
div>

對三個li進行左浮動。我們預想的是div0的內容在同一行顯示，其他的各自展示在一行中。然而事實是，div1緊跟在div0后，這便是浮動造成的影響。

浮動解決方法：

1、浮動元素父級設高法

也就是給div0設置一個高度。來看看效果：

.div0 { height: 30px; }

很好的解決了問題，不過平時我們在使用中不能精確的得出元素的高度，所以這個方法不太實用。

2、空div清除浮動

也就是給浮動元素后面加一個空的div標簽，設置clear屬性來清除浮動：

<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)浮動元素,這里也可以設置為clear: left。在這里直接給div1一個clear樣式能起到同樣的效果。

3、浮動元素父級設overflow:hidden/auto法

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

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

overflow本意是對溢出元素框的內容做處理。在這里用，剛好可以撐開父元素的高度。

4、浮動元素父級設display:inline-block

.div0 { display: inline-block}

這種方式有種缺點，會使margin: 0 auto居中方式失效。

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

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

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

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

5、偽類after清除浮動法

目前最常用也最好用的清除浮動方法。ie需要設置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>

?

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/997.html

相關文章

  • 那些年使用過的清除浮動的方法

    摘要：浮動使元素框向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框脫離了文檔的普通流，所以文檔的普通流中的框表現(xiàn)得就像浮動框不存在一樣。浮動使元素框向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。 由于浮動框脫離了文檔的普通流，所以文檔的普通流中的框表現(xiàn)得就像浮動框不存在一樣。 這段代碼： style .parent { width:...

    wqj97 評論0 收藏0

  • 理解CSS浮動與清理

    摘要：浮動為什么會有文本環(huán)繞效果產生這個疑問主要來自于以往的印象浮動的元素是脫離文檔流的。也就是說，浮動元素的確脫離了文檔流，因此文檔流中的塊框會無視浮動的元素，但是文本不會。 作為前端寫了很多頁面布局，但是浮動這塊一直是我似懂非懂的盲點，一方面用浮動能實現(xiàn)很多布局，另一方面浮動造成的影響又會破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點。 本文主要討論以下幾個問題：1.浮動的原始用途...

    Tonny 評論0 收藏0

  • 理解CSS浮動與清理

    摘要：浮動為什么會有文本環(huán)繞效果產生這個疑問主要來自于以往的印象浮動的元素是脫離文檔流的。也就是說，浮動元素的確脫離了文檔流，因此文檔流中的塊框會無視浮動的元素，但是文本不會。 作為前端寫了很多頁面布局，但是浮動這塊一直是我似懂非懂的盲點，一方面用浮動能實現(xiàn)很多布局，另一方面浮動造成的影響又會破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點。 本文主要討論以下幾個問題：1.浮動的原始用途...

    cyqian 評論0 收藏0

  • 浮動與浮動的清除

    摘要：一浮動一浮動說浮動就必須提及一下文檔流，當中的元素按照從左到右，從上到下的順序進行排列稱之為文檔流，也就是正常排列。一、浮動 說浮動就必須提及一下文檔流，HTML當中的元素按照從左到右，從上到下的順序進行排列稱之為文檔流，也就是正常排列。 而浮動是什么呢？浮動會讓元素脫離文檔流，假如A元素浮動了，原本排在該元素之后的元素發(fā)現(xiàn)A元素不在這個文檔流了，就會無視它往上接到A元素前面的元素之后(PS...

    Chao 評論0 收藏0

發(fā)表評論

0條評論

AbnerMing

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<