亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

什么是clearfix (一文搞清楚css清除浮動(dòng)clearfix)

  發(fā)布時(shí)間：2023-05-12 08:49:12   作者：xiagh   我要評論
clearfix 是一種 CSS 技巧，可以在不添加新的 html 標(biāo)簽的前提下，解決讓父元素包含浮動(dòng)的子元素的問題。這個(gè)技巧的版本是很多的，最流行的一個(gè)是 Micro Clearfix Hack

 什么是 clearfix ？

clearfix 是一種 CSS 技巧，可以在不添加新的 html 標(biāo)簽的前提下，解決讓父元素包含浮動(dòng)的子元素的問題。這個(gè)技巧的版本是很多的，最流行的一個(gè)是 Micro Clearfix Hack 。這個(gè)也是 Bootstrap 采用的方案（可以 google 一下 “bootstrap clearfix” 來查看詳情）。

Micro Clearfix Hack 的作者給出的原始方案，內(nèi)容如下：

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

但是我的習(xí)慣是支持到 IE9+ ，同時(shí)習(xí)慣了用 “ clearfix ” 作為 class 名，所有稍微修改后的版本如下：

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

百度用的代碼

.clearfix:after{content:'\20';display:block;height:0;clear:both}
.clearfix{zoom:1}
.clear{clear:both;height:0;line-height:0;font-size:0;visibility:hidden;overflow:hidden}

腳本之家用的

.clear{clear: both;overflow: hidden;line-height: 0;height: 0;zoom:1}
.clear:after {display: block; height: 0px; visibility: hidden; clear: both; content: ""}
.clearfix{ *zoom:1;}
.clearfix:before,	
.clearfix:after {content: ".";display: block;height: 0;overflow: hidden;visibility: hidden;}
.clearfix:after{clear: both}

用了這個(gè)方法很長時(shí)間之后，都覺得上面的代碼就是天書，尤其是對 display: table 這一行不理解。其實(shí)，這些代碼為的是解決兩個(gè)實(shí)際中經(jīng)常遇到，而且非常讓人惱火的問題。問題搞清楚了，代碼也就明白了。

自清除子元素浮動(dòng)

  • 先說第一個(gè)問題和解決方案。

  • div 布局的一個(gè)非常讓新手頭疼的問題就是，如果一個(gè)父元素中包含若干個(gè)子元素，那么當(dāng)給所有的子元素都設(shè)置了浮動(dòng)（ e.g float: left ），那么父元素的高度就會(huì)為0。

比如有這樣的 html 代碼：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

如果子元素沒有浮動(dòng)，那么顯示是這樣的：

這里寫圖片描述

但是一旦所有子元素都浮動(dòng)了，那么父元素的高度變?yōu)?，就成了這樣的惡心效果：

這里寫圖片描述

解決方法如下：

html 中添加 clearfix

<div class="container clearfix">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

如果只是解決這個(gè)問題，那么下面的代碼就夠了。

.clearfix:after {
   content: " ";
   display: block;
   clear: both;
}

但是注意，文章開始的代碼中使用 display: table 而不是這里的 display: block ，可以同樣解決這個(gè)問題。但是，下面這個(gè)問題中使用 display: table 就是必須的了。

Margin Collapse 外邊距重疊問題

再來說第二個(gè)問題。

外邊距重疊也是一個(gè)很讓人討厭的問題。來描述一下癥狀。

container 之中包含一個(gè) item 子元素，代碼如下

<div class="container">
  <div class="item">
    item
  </div>
</div>

比如默認(rèn)顯示成這樣：

這里寫圖片描述

這時(shí)，我給 item 加了 margin-top: 30px ，本來這時(shí)候我期待的結(jié)果是，item 塊本身應(yīng)該距離 container 青色區(qū)域的上邊界 30px 。同時(shí)一個(gè)副作用是青色區(qū)域應(yīng)該拉高 30px 。但是實(shí)際上得到的卻是下面的效果：

這里寫圖片描述

造成這個(gè)的原因是，父子元素的 margin-top 是會(huì)重疊的，即使是像上面的情況中，父元素 container 自身 margin-top 為 0 的情況下也一樣。這樣造成的一個(gè)現(xiàn)象就是父元素“包不住”子元素的 margin-top ，溢出了。類似的問題也會(huì)發(fā)生在 margin-bottom 身上。

要解決這個(gè)問題，就要給 container 添加 clearfix ，html 代碼如下

<div class="container clearfix">
  <div class="item">
    item
  </div>
</div>

如果只是針對這一種問題，最簡單的 clearfix 實(shí)現(xiàn)是這樣：

.clearfix:before,
.clearfix:after
{
 content: "   ";
 display: table;
}

注意，display: table 換成 dispaly: block 是不行的。

效果圖

完整測試代碼腳本的家專門提供

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
.header{margin:0 auto;width:660px;color:white;font-size:18px;text-align:center;background-color:#fa1698;width:660px;height:70px;line-height:70px}
.container{margin:0 auto;width:660px;color:white;font-size:18px;text-align:center;background-color:#1a8081;}
.item{background-color:#fa653e;width:70px;height:70px;line-height:70px;margin-top: 30px}
.clearfix:before,
.clearfix:after
{
 content: " ";
 display: table;
}
.clearfix{zoom:1}
.clear{clear:both;height:0;line-height:0;font-size:0;visibility:hidden;overflow:hidden}
    </style>
</head>
<body style="text-align:center;">
<div class="header">
header
</div>
<div class="container clearfix">
  <div class="item">
    item
  </div>
</div>
</body>
</html>

當(dāng)然，外邊距重疊不局限于上面的父子元素之間，也會(huì)發(fā)生在兄弟元素之間，甚至是一個(gè)高度為 0 的元素，自己的上下邊距也會(huì)重疊，這個(gè)就是 MDN Margin Collapse 文檔上給出的全部三種情況，但是后兩種在實(shí)際開發(fā)中不會(huì)帶來很大麻煩，也不是咱們的 clearfix 方法所關(guān)心的。

結(jié)語

上面兩個(gè)問題的解決代碼合并到一起，就是文章最初 Peter 給出的 clearfix 代碼了。 有了這個(gè)方法，當(dāng)給子元素添加浮動(dòng)或者是 margin 的時(shí)候，父元素的行為就非常符合正常的預(yù)期了，開發(fā)頁面布局變得非常簡單，所以 clearfix 方法對于按照 div 的 block 模型排版是非常有用的。

下面分享一段當(dāng)前比較常用的代碼

.clearfix:after{content:'\20';display:block;height:0;clear:both}
.clearfix{zoom:1}
.clear{clear:both;height:0;line-height:0;font-size:0;visibility:hidden;overflow:hidden}

但是，順便提一下，未來 flexbox 會(huì)大行其道，flexbox 模型的特點(diǎn)是，不用 float ，并且子元素的 margin 也不會(huì)和父元素重疊。

到此這篇關(guān)于什么是clearfix (一文搞清楚css清除浮動(dòng)clearfix)的文章就介紹到這了,更多相關(guān)什么是clearfix內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論