css清浮動

EdwardUp 發布于2019-04-23 13:46 / 2120人閱讀

摘要：元素浮動會讓元素脫離文檔流，從而不能撐開父級的內容。今天我將展示常見的清除浮動的方法。什么是浮動什么是浮動浮動元素脫離文檔流并且向左或者向右移動，直到浮動元素的邊緣碰到父級框或者另一個浮動元素的邊框為止。允許浮動元素出現在兩側。

我們在平常做項目的時候，float這個css屬性經常會用到。元素浮動會讓元素脫離文檔流，從而不能撐開父級的內容。今天我將展示常見的清除浮動的方法。

什么是浮動

浮動元素脫離文檔流并且向左或者向右移動，直到浮動元素的邊緣碰到父級框或者另一個浮動元素的邊框為止。

浮動的影響

浮動元素會使得父級元素高度塌陷

html:

css:

* { // 實際項目中不要用通配符*去設置樣式
    margin: 0;
    padding: 0;
}
ul {
    border: 10px solid red;
}
li {
    width: 100px;
    height: 100px;
    margin-left: 10px;
    list-style: none;
    background: orange;
    float: left;
}

效果圖：

由于浮動元素脫離文檔流，不再占據原來的文檔流空間，不能撐開父級的內容，所以父級的高度就不存在了。

下面我們將介紹清浮動的兩個大類。

清浮動的方法

clear清浮動（clearfix方案）

在css中專門有一個來解決高度塌陷的屬性，那就是我們常用的clear屬性。clear的用法如下：

clear: none | right | left | both | inherit;

下面對clear值的解釋來之w3c

none：默認值。允許浮動元素出現在兩側。
right：在右側不允許浮動元素。
left：在左側不允許浮動元素。
both：在左右兩側均不允許浮動元素。
inherit：規定應該從父元素繼承 clear 屬性的值。

我們清除浮動的時候常用clear: both;，注意： clear屬性只對塊級元素起作用。

下面展示一個與clear值為both有關的例子。

html:

css:

* {
    margin: 0;
    padding: 0;
}
li {
    width: 100px;
    height: 100px;
    margin-left: 10px;
    list-style: none;
    background: orange;
    float: left;
    margin-bottom: 10px;
}
li:nth-child(3) {
    clear: both;
}

上面代碼所渲染出來的效果是下面的圖：

不知道當大家看到這個結果的時候，是不是開始懷疑w3c中的解釋了。實際上clear值為both指的是讓自身和前面的浮動元素不相鄰。沒錯，是前面的，并不是前面后面都兼顧，所以上面的例子中展示的效果是兩列而不是三列。

下面展示使用clear清浮動，接著最開始的代碼，我們對其進行清浮動。(注意下面只展示在最開始代碼中增加的代碼)

css:

ul {
    zoom: 1;        // 為了兼容IE6/7
}
ul:after {          // 內聯
    content: "";    // 內容為空字符是為了不影響本來的dom
    display: block; // 這里的值也可以是table | list-item，只要能夠讓偽類成為塊級元素。
    clear: both;
}

效果圖：

BFC清浮動

BFC的全稱block formatting context，中文意思是“塊級格式化上下文”。

BFC特性

“css世界的結界”（引自張鑫旭的《css世界》），在這個結界中內部子元素不管如何變化都不會對外部的元素有影響。BFC元素的margin不會發生折疊，因為margin折疊影響外部元素的布局。清除浮動，如果BFC不能夠清除浮動，那么BFC元素高度就會塌陷，那么內部的元素就會影響到其他的元素的布局，這跟前面說的BFC元素內部的子元素不會影響外部元素相違背。

BFC的實現：（引自張鑫旭的《css世界》）

根元素
float的值非none
overflow的值為auto、scroll、hidden
display的值為table-cell、table-caption和inline-block
position的值不為relative和static

css:

ul {
    overflow: auto; // 使浮動元素的父級成為BFC就行可以實現清浮動
}

效果如下圖：

大家有可能會有疑問只要一句話實現BFC，那為什么我們還要用上面的clearfix方案？

overflow: auto;不支持IE6/7。overflow: hidden;不支持IE6，使用這個屬性容器外的元素可能被隱藏。

但是，大家想下現在使用IE6/7/8的用戶還有好多。我個人覺得現在我們沒必要去管IE6/7/8，拋棄那部分用戶對于我們的影響微不足道。上面這段話只是個人想法，并沒有想過讓他人必須這樣想，如果大家對這段有什么不滿請輕噴。

最后建議大家不要一味的使用clearfix方案。

云服務器 GPU云服務器 html清浮動浮動-前端-css 電腦主機清灰 php 清緩存

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

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

CSS清除浮動float的三種方法總結，為什么清浮動？浮動會有那些影響？

摘要：方法三據說是最高大上的方法方法注意作用于浮動元素的父親先說原理這種方法清除浮動是現在網上最拉風的一種清除浮動，他就是利用和來在元素內部插入兩個元素塊，從面達到清除浮動的效果。的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實現清楚浮動。一、拋一塊問題磚（display： block）先看現象： showImg(https://segmentfault.com/img/bVrWvS)...

MAX_zuo 2019-08-28 18:28 評論0 收藏0
清楚浮動/邊界塌陷bfc

摘要：不會重疊浮動元素可以包含浮動我們可以利用的第三條特性來清浮動，這里其實說清浮動已經不再合適，應該說包含浮動。總而言之清理浮動兩種方式利用屬性，清除浮動使父容器形成 CSS清浮動處理（Clear與BFC）在CSS布局中float屬性經常會被用到，但使用float屬性后會使其在普通流中脫離父容器，讓人很苦惱 1 浮動帶來布局的便利，卻也帶來了新問題復制代碼 1 2 3 4 ...

remcarpediem 2019-08-30 11:25 評論0 收藏0
（CSS）帶有右側邊欄的響應式頁面的CSS樣式

摘要：一目的要創建一個響應式頁面右側邊欄為，左側內容為。當窗口寬度小于時，上述在上，在下，隨著窗口大小的變化，二者的與自動調整。移動到上面實現的效果如下圖在窗口寬度小于時，右側邊欄內容在網頁上方顯示，不合格。一、目的要創建一個響應式頁面：右側邊欄為div.right-bottom，左側內容為div.left-top。當窗口寬度大于700px時，隨著窗口大小的變化，div.right...

546669204 2019-08-29 10:55 評論0 收藏0
前端整理——css部分

摘要：圣杯布局和雙飛翼布局解決問題的方案在前一半是相同的，也就是三欄全部浮動，但左右兩欄加上負讓其跟中間欄并排，以形成三欄布局。雙飛翼布局，為了中間內容不被遮擋，直接在中間內部創建子用于放置內容，在該子里用和為左右兩欄留出位置。（1）盒模型（普通盒模型、怪異盒模型） 1、元素的content（內容）、padding(內邊距)、border（邊框）、margin（外邊距）構成了CSS盒模型 2、IE...

chaosx110 2019-04-23 11:56 評論0 收藏0
簡述清除浮動

摘要：為什么要清除浮動影響其他元素定位父盒子高度為，子盒子全部浮動定位，子盒子不會撐開父盒子，下面的元素會到子盒子的下面。清除浮動方法總結對父級元素設置高度對父級設置適合高度樣式清除浮動，一般設置高度需要能確定內容高度才能設置高度設置為內容高度。為什么要清除浮動？ 1、影響其他元素定位父盒子高度為0，子盒子全部浮動、定位，子盒子不會撐開父盒子，下面的元素會到子盒子的下面。 2.背景圖片或顏...

FuisonDesign 2019-08-29 12:35 評論0 收藏0