成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

googollee / 2914人閱讀

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

寫在前面

浮動是CSS中一個相對比較麻煩的屬性，與之伴隨的通常是清除浮動。今天我們一起來搞定浮動。

常見的用法

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

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

另一種常見的浮動的用法如下圖：

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

浮動帶來的問題

浮動的元素無法撐開父元素，即導致高度坍塌??！

來看下面的例子：


  

  




.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;
}

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

清除浮動

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

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

首先，添加以下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;
}

得到的效果如下：

浮動的元素就可以撐開父容器的高度啦！

總結(jié)

浮動的元素無法撐開父容器的高度，所以需要清除浮動

浮動可以很簡單的實現(xiàn)右對齊。

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

因此，注意浮動的使用場景，并且在需要的時候清除浮動，就可以很好的控制浮動啦~

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114092.html

相關(guān)文章

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

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

    Amos 評論0 收藏0

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

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

    hss01248 評論0 收藏0

  • 【零基礎(chǔ)入門】css學習筆記（6） 清除浮動

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

    BingqiChen 評論0 收藏0

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

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

    Crazy_Coder 評論0 收藏0

  • CSS入門指南-2：盒子模型、浮動和清除

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

    ConardLi 評論0 收藏0

發(fā)表評論

0條評論

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