css浮動與清除浮動

時間 2019-11-12

標籤 css 浮動清除欄目 CSS 简体版

原文原文鏈接

1、css浮動css

來源：html

浮動屬性產生之初是爲了實現「文字環繞」的效果，讓文字環繞圖片在網頁實現相似word中「圖文混排」。wordpress

什麼是css浮動：佈局

浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。（注：邊框指的是內容content的外邊界）測試

舉例說明：spa

html代碼：code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="float.css">
</head>
<body>
<div class="container">
   圖片不具備浮動屬性時，圖片會出如今文字後面。
   圖片不具備浮動屬性時，圖片會出如今文字後面。
   圖片不具備浮動屬性時，圖片會出如今文字後面。
   圖片不具備浮動屬性時，圖片會出如今文字後面。
   圖片不具備浮動屬性時，圖片會出如今文字後面。
   圖片不具備浮動屬性時，圖片會出如今文字後面。
   <img  src="img/test.png">
</div>

<div class="container">
   圖片具備浮動屬性時，文字會環繞在圖片周圍。
   圖片具備浮動屬性時，文字會環繞在圖片周圍。
   圖片具備浮動屬性時，文字會環繞在圖片周圍。
   圖片具備浮動屬性時，文字會環繞在圖片周圍。
   圖片具備浮動屬性時，文字會環繞在圖片周圍。
   <img class="fl" src="img/test.png">
</div>
</body>
</html>

css代碼：htm

.container{
    border:1px solid yellow;
    padding:20px;
    background-color:yellow;
    background-clip:content-box;//背景被裁剪到內容框。

}
.fl{
    float: left;
}

效果圖：blog

沒有給圖片添加浮動屬性時：圖片

給圖片添加浮動屬性後：

2、浮動的包裹性與破壞性

浮動具備兩方面的影響，包裹性和破壞性。關於這兩個方面的影響，在張鑫旭大神的一篇技術博客中《CSS float浮動的深刻研究、詳解及拓展》有詳細講解，連接見文末。包裹性就是指元素尺寸能夠恰好容納內容。破壞性是指元素浮動後可能致使的父元素高度塌陷。

博客節選：「一、文字之因此會環繞含有float屬性的圖片時由於浮動破壞了正常的line boxes。......二、在目前的CSS的世界中，全部的高度都是有兩個CSS模型產生的，一個是box盒狀模型，對應CSS爲」height+padding+margin」，另一個是line box模型，對應樣式爲」line-height」。前者的height屬性分爲明顯的height值和隱藏的height值，所謂隱藏的height值是指圖片的高度，一旦載入一張圖片，其內在的height值就會起做用，即便您看不到」height」這個詞。然後者針對於文字等這類inline boxes的元素（圖片也屬於inline boxes，但其height比line-height做用更兇猛，故其inline boxes高度等於其自身高度，對line-height無反應），inline boxes的高度直接受line-height控制（改變line-height文字拉開或重疊就是這個緣由），而真正的高度表現則是由每行衆多的inline boxes組成的line boxes（等於內部最高的inline box的高度），而這些line boxes的高度垂直堆疊造成了containing box的高度，也就是咱們見到的div或是p標籤之類的高度了。因此，對於line box模型的元素而言，沒有inline boxes，就沒有高度了，而浮動卻偏偏作了這麼齷齪的事情，其直接將元素的inline boxes也破壞了，因而這些元素也就沒有了高度。......三、浮動破壞了圖片的inline box，產生了兩個結果：一是圖片沒法與文字同行顯示，脫離了其原來所在的line box鏈；二是沒有了高度（無inline box -> 無line box -> 無高度）。而這些結果偏偏是文字環繞圖片顯示所必須的。」

3、清除浮動（形成的的影響）

方法一：

把<div style="clear:both;"></div>做爲最後一個子元素放在父元素末尾。缺點：在html代碼中多出沒有意義的標籤，不符合html標籤語義化，不方便後期維護。

方法二：

給父元素添加屬性overflow：hidden；或者overflow：auto；。經測試在ie7中，子元素浮動並不會致使父元素塌陷。缺點：可能會致使後代元素內容被裁剪。

方法三：

使父元素自己也浮動。缺點：會影響總體佈局。

方法四：

給父元素增長after僞元素，給after僞元素增長屬性clear：both；。這是目前爲止最推薦使用的方法。

4、參考博客（感謝如下文章做者）：

一、博客園starof：http://www.cnblogs.com/starof/p/4608962.html。

二、張鑫旭.CSS float浮動的深刻研究、詳解及拓展(一):http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/

三、張鑫旭.CSS float浮動的深刻研究、詳解及拓展(二):http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%BA%8C/

四、張鑫旭.對overflow與zoom」清除浮動」的一些認識:http://www.zhangxinxu.com/wordpress/2010/01/%E5%AF%B9overflow%E4%B8%8Ezoom%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%E7%9A%84%E4%B8%80%E4%BA%9B%E8%AE%A4%E8%AF%86/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。