成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

前端入門-day3(CSS中浮動(dòng)和清除浮動(dòng))

googollee / 2968人閱讀

摘要：寫在前面浮動(dòng)是中一個(gè)相對(duì)比較麻煩的屬性，與之伴隨的通常是清除浮動(dòng)。清除浮動(dòng)因此，當(dāng)我們用到了浮動(dòng)，又不想出現(xiàn)這種情況的時(shí)候，就需要清除浮動(dòng)。因此，注意浮動(dòng)的使用場(chǎng)景，并且在需要的時(shí)候清除浮動(dòng)，就可以很好的控制浮動(dòng)啦

寫在前面

浮動(dòng)是CSS中一個(gè)相對(duì)比較麻煩的屬性，與之伴隨的通常是清除浮動(dòng)。今天我們一起來搞定浮動(dòng)。

常見的用法

事實(shí)上，當(dāng)我們將一個(gè)元素設(shè)置成浮動(dòng)時(shí)，達(dá)到的效果如下圖：

這種版式相信大家都見過，很多雜志都會(huì)采用這種左邊或者右邊插圖，文字環(huán)繞的效果。

另一種常見的浮動(dòng)的用法如下圖：

即在某一行內(nèi)，使某一部分右對(duì)齊，通常不會(huì)用margin實(shí)現(xiàn)，而是使用浮動(dòng)。

浮動(dòng)帶來的問題

浮動(dòng)的元素?zé)o法撐開父元素，即導(dǎo)致高度坍塌??！

來看下面的例子：


  

  




.container {
  background-color: lightblue;
  font-size: 0;
}
.son1 {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: orange;
}
.son2 {
  width: 100px;
  height: 100px;
  float: right;
  background-color: lightgray;
}

當(dāng)較大的方塊浮動(dòng)時(shí)，我們可以看到他無法撐開父元素。通常情況下這不是我們想要的結(jié)果，因?yàn)檫@會(huì)導(dǎo)致布局混亂。當(dāng)父元素內(nèi)的子元素全部浮動(dòng)時(shí)尤其明顯，父元素的高度會(huì)坍塌為0。

清除浮動(dòng)

因此，當(dāng)我們用到了浮動(dòng)，又不想出現(xiàn)這種情況的時(shí)候，就需要清除浮動(dòng)。

清除浮動(dòng)的方式可能有很多種，但是現(xiàn)在比較流行，我個(gè)人比較喜歡的方式如下：

首先，添加以下CSS：

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

然后，在父容器上添加clearfix類，最后代碼如下：


  

  




.container {
  background-color: lightblue;
  font-size: 0;
}
.son1 {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: orange;
}
.son2 {
  width: 100px;
  height: 100px;
  float: right;
  background-color: lightgray;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

得到的效果如下：

浮動(dòng)的元素就可以撐開父容器的高度啦！

總結(jié)

浮動(dòng)的元素?zé)o法撐開父容器的高度，所以需要清除浮動(dòng)

浮動(dòng)可以很簡單的實(shí)現(xiàn)右對(duì)齊。

浮動(dòng)可以很簡單的實(shí)現(xiàn)文字環(huán)繞效果。

因此，注意浮動(dòng)的使用場(chǎng)景，并且在需要的時(shí)候清除浮動(dòng)，就可以很好的控制浮動(dòng)啦~

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/114092.html

相關(guān)文章

  • CSS 布局經(jīng)典問題初步整理

    摘要：布局經(jīng)典問題初步整理標(biāo)簽前端本文主要對(duì)布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，布局，等等。 CSS 布局經(jīng)典問題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對(duì) CSS 布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)l...

    Amos 評(píng)論0 收藏0

  • 前端入門4-CSS屬性樣式表

    摘要：正文屬性樣式表正文屬性樣式表了解了具體的各種工作原理使用方式選擇器規(guī)則層疊算法等之后，那么該來學(xué)習(xí)的也就是都支持哪些屬性樣式表了。 本篇文章已授權(quán)微信公眾號(hào) dasu_Android（大蘇）獨(dú)家發(fā)布 聲明 本系列文章內(nèi)容全部梳理自以下四個(gè)來源： 《HTML5權(quán)威指南》 《JavaScript權(quán)威指南》 MDN web docs Github:smyhvae/web 作為一個(gè)前端小白，入...

    hss01248 評(píng)論0 收藏0

  • 【零基礎(chǔ)入門】css學(xué)習(xí)筆記（6） 清除浮動(dòng)

    摘要：清除浮動(dòng)，為何要清除浮動(dòng)浮動(dòng)效果會(huì)帶來不好的影響子元素浮動(dòng)會(huì)帶來父元素高度塌陷。，清除浮動(dòng)的兩大基本方式，運(yùn)用清除浮動(dòng)。元素流入頁面時(shí)，在這個(gè)元素左邊右邊或兩邊不允許有浮動(dòng)內(nèi)容。除了是用來清除浮動(dòng)的，其它代碼都是為了隱藏掉生成的內(nèi)容。 清除浮動(dòng) 1，為何要清除浮動(dòng) 浮動(dòng)效果會(huì)帶來不好的影響： 子元素浮動(dòng)會(huì)帶來父元素高度塌陷。具體解釋：當(dāng)浮動(dòng)框高度超出包含框時(shí)，包含框不會(huì) 自動(dòng)伸高 來閉...

    BingqiChen 評(píng)論0 收藏0

  • 深入css布局 (2) — 定位與浮動(dòng)

    摘要：深入布局定位與浮動(dòng)在知識(shí)體系中，除了選擇器，樣式屬性等基礎(chǔ)知識(shí)外，布局相關(guān)的知識(shí)才是比較核心和重要的點(diǎn)。定位后，原來在文檔流中占據(jù)的位置，會(huì)被其他元素所占據(jù)。清除浮動(dòng)的特殊應(yīng)用清除浮動(dòng)可以解決父元素高度塌陷問題。? 深入css布局(2) — 定位與浮動(dòng) ? ???? 在css知識(shí)體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識(shí)外，css布局相關(guān)的知識(shí)才是css比較核心和重要的點(diǎn)。今天我們來深...

    Crazy_Coder 評(píng)論0 收藏0

  • CSS入門指南-2：盒子模型、浮動(dòng)和清除

    摘要：會(huì)在元素內(nèi)容而不是元素后插入一個(gè)偽元素使用意味著中新增的子元素會(huì)被清除左右浮動(dòng)元素。這一篇主要介紹了盒子模型，浮動(dòng)和清除。 這是CSS設(shè)計(jì)指南的讀書筆記，用于加深學(xué)習(xí)效果。 上一篇介紹了css 的工作原理，這一篇主要介紹盒子模型和浮動(dòng)。 盒子模型 所謂盒子模型，就是瀏覽器為頁面中的每個(gè)HTML元素生成的矩形盒子。這些盒子們都要按照可見版式模型在頁面上排布。 可見的頁面版式主要由三個(gè)屬性...

    ConardLi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<