css浮動是什麼意思?css浮動的原理以及css清除浮動的方法(附代碼)

來源:互聯網
上載者:User
css浮動是什麼意思?所謂css浮動就是浮動元素會脫離文檔的普通流,根據 float的值向左或向右移動,直到它的外邊界碰到父元素的內邊界或另一個浮動元素的外邊界為止。由於浮動框不在文檔的普通流中,所以文檔的普通流中的區塊層級元素表現得就像浮動元素不存在一樣。接下來,本文講給大家說一說css浮動的原理以及css清除浮動的方法。

浮動影響

浮動元素會造成父元素塌陷

當給元素設定float之後,元素脫離文檔流,父元素沒有設定height,造成塌陷。

<div class="super">    <div class="sub"></div></div>.super{    border:1px solid red;}.sub{  float: left;  background: green;  border: 1px solid yellow;  width: 100px;  height: 100px;}

浮動元素的左(右)外邊界不能超出其父元素的左(右)內邊界。

在不設定margin為負值和父元素還有剩餘空間的情況下,浮動元素的外邊界(margin)不會超出父元素的內邊界(padding)。

<div class="super">    <div class="sub1"></div>    <div class="sub2"></div></div> .super{    margin: 0 auto;    padding: 10px;    border:1px solid yellow;     width: 300px;}.super:after{  clear: both;  content: '';  display: block;}.sub1{  float: left;  background: pink;  border: 1px solid green;  width: 100px;  height: 100px;}.sub2{  float: right;  background: pink;  border: 1px solid green;  width: 100px;  height: 100px;}

浮動元素不會重疊。

這個也是在margin不會為負值和父元素還有剩餘空間的條件下適用的。
這個是我對《CSS權威指南》中浮動這一章節中規則二和規則三的理解,以下是原文。

2、The left (or right) outer edge of a floated element must be to the right (or left) of the right (left) outer edge of a left-floating (or right-floating) element that occurs earlier in the document’s source, unless the top of the later element is below the bottom of the former.

有道翻譯:

2、浮動元素的左(或右)外緣必須位於右(左)的右(左)左側浮動(或右浮動)元素的外邊緣,該元素在文檔的原始碼中較早出現,除非後面的元素的頂部在下面

3.The right outer edge of a left-floating element may not be to the right of the left outer edge of any right-floating element to its right. The left outer edge of a right- floating element may not be to the left of the right outer edge of any left-floating element to its left.

有道翻譯:

3、左浮動元素的右外緣可能不是右浮動元素的左外邊緣的右側。一個右浮動元素的左外邊緣可能不在左邊任何左浮動元素的右外緣的左邊。

這兩個規則是保證兩個浮動元素不重疊的基礎。

表現為當一個浮動元素往左(右)靠的時候,在這個元素左(右)邊已經存在一個浮動元素,他們不會重疊,後來者緊挨著先來者排列。如果浮動元素們的總寬度已經超過父元素的寬度,浮動元素之間也不會重疊,依照HTML結構的順序,從在一行排列不下的浮動元素開始會移動到下一行。

<div class="super super1">    <div class="sub1"></div>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈    <div class="sub2"></div></div><div class="super super2">    <div class="sub1">float:left</div>    <div class="sub2">float:right</div></div>.super {    float: left;    margin: 10px;    padding: 10px;    border: 1px solid blue;    width: 300px;}.super1 .sub1{    float: left;    background: pink;    border: 1px solid red;    width: 100px;    height: 100px;}.super1 .sub2{    float: left;    background: pink;    border: 1px solid red;    width: 100px;    height: 100px;}.super2 .sub1{    float: left;    background: pink;    border: 1px solid red;    width: 200px;    height: 100px;}.super2 .sub2{    float: right;    background: pink;    border: 1px solid red;    width: 200px;    height: 100px;}

效果如下:

浮動元素的頂端不能比其父元素的內頂端更高,不能比之前出現的浮動元素頂端高。

這個規則也是在margin-top不為負值的情況下成立。

父元素的頂端會限制浮動元素,防止一直浮動到頁面頂端。
對於右邊的例子,sub2在sub1下面,sub1右邊的空間已經不足以容納sub2,但是足夠容納sub3,而sub3沒有上浮,那是因為他的的頂端就不能超過sub2的頂端,這個例子足以印證浮動元素的頂端不能比之前出現的浮動元素頂端高。

<div class="super">    <div class="sub sub0"></div></div><div class="super">    <div class="sub sub1">sub1</div>    <div class="sub sub2">sub2</div>    <div class="sub sub3">sub3</div></div>.super {    float: left;    margin: 10px;    padding: 10px;    border: 1px solid blue;    width: 320px;}.sub {    background: pink;    border: 1px solid red;    height: 100px;}.sub0 {    float: left;    width: 100px;}.sub1 {    float: left;    width: 200px;}.sub2 {    float: left;    width: 150px;}.sub3{    float: right;    width: 50px;}

效果如下:

清除浮動

清除浮動的目的是為瞭解決高度塌陷的問題,撐開浮動父元素。常用的一般有幾種方法:

增加一個樣式為clear:both的空標籤

<p style="clear:both;"></p>

把上面這句標籤放到浮動元素的父元素的最後。

原理:clear會在元素的margin-top之上增加一個清除地區(clearance),這個地區會在元素的margin-top上增加額外間隔,並且不允許浮動元素進入這個地區。

優點:方便,相容性強。

缺點:多出許多無意義的標籤,增加維護成本,而且稍不注意中間多了個空格會產生一段空白高度。

父元素設定浮動

優點:簡單,代碼少,瀏覽器支援好。
缺點:父級使用浮動之後,浮動造成的影響仍舊存在,並且不可能父級往上一級級都使用浮動。

使用overflow、zoom屬性

.fix{    overflow:hidden(auto、scroll);     zoom:1;}

優點:代碼簡潔,相容性好,不產生多餘標籤。

缺點:設定該fix類的標籤的內容超出該標籤的時候會被隱藏(或產生捲軸)。

父元素設定浮動

優點:簡單,代碼少,瀏覽器支援好。
缺點:父級使用浮動之後,浮動造成的影響仍舊存在,並且不可能父級往上一級級都使用浮動。

父元素設定position

原理:在position的值不為relativestatic的情況下,會形成BFC。

這種方式在父元素原本就需要設定positionfixed或者absolute的時候可以優先採用。

優點:簡單,代碼少,瀏覽器支援好。
缺點:改變父元素布局,影響整體布局。

使用:after

.fix:after{    display:block;     content:'';     clear:both; }

原理類似添加新的標籤然後設定clear:both;,但使用偽類的方法沒有多餘標籤。

優點:代碼簡潔,相容性好,不產生多餘標籤。

以上方法中,第一種增加一個樣式為clear:both的空標籤的方法不建議使用,會增加無意義標籤,其他設定父元素浮動,改變父元素position、overflow的方法依情況而定,如果父元素本身就有這方面的樣式需求,那很合適,如果沒有的話還是採用最後一種虛擬元素的:after的方式最為常見。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.