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

googollee 發布于2019-08-29 17:05 / 2899人閱讀

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

寫在前面

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

常見的用法

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

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

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

即在某一行內，使某一部分右對齊，通常不會用margin實現，而是使用浮動。

浮動帶來的問題

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

來看下面的例子：


  
  


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

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

清除浮動

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

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

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

得到的效果如下：

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

總結

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

浮動可以很簡單的實現右對齊。

浮動可以很簡單的實現文字環繞效果。

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

云服務器 GPU云服務器浮動-前端-css 清除浮動在html中怎么浮動 html浮動向上浮動

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/114092.html

CSS 布局經典問題初步整理

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

Amos 2019-08-29 12:36 評論0 收藏0
前端入門4-CSS屬性樣式表

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

hss01248 2019-04-23 13:14 評論0 收藏0
【零基礎入門】css學習筆記（6）清除浮動

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

BingqiChen 2019-08-30 15:53 評論0 收藏0
深入css布局 (2) — 定位與浮動

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

Crazy_Coder 2019-04-23 13:42 評論0 收藏0
CSS入門指南-2：盒子模型、浮動和清除

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

ConardLi 2019-08-29 12:59 評論0 收藏0