首頁 web前端 css教學 什麼是浮動以及浮動的清除方法

什麼是浮動以及浮動的清除方法

Sep 11, 2018 pm 05:44 PM
clear css 偽元素 浮動

本章要跟大家介紹什麼是浮動以及浮動的清除方法。有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

一、浮動

說浮動就必須提及文件流,HTML當中的元素依照從左到右,從上到下的順序進行排列稱為文檔流,也就是正常排列。

而浮動是什麼呢?浮動會讓元素脫離文檔流,假如A元素浮動了,原本排在該元素之後的元素發現A元素不在這個文檔流了,就會無視它往上接到A元素前面的元素之後(PS:但是文字並不會無視它,還會環繞A元素,也就是A元素沒有脫離文字流。

什麼是浮動以及浮動的清除方法

#而如果使用position的絕對定位會連文字流也脫離文檔流。

什麼是浮動以及浮動的清除方法

浮動的好處當然是佈局了,例如透過浮動來形成三列佈局,文字環繞等等。但是浮動也有一個問題,那就是會導致高度的塌陷,就像上面的圖片顯示,父元素的高度塌陷了,並沒有將浮動的子元素包裹進去,這樣子就會造成佈局上的錯誤。

##二、BFC

什麼是BFC?BFC是Block Formatting Context的縮寫,也就是區塊層級格式化上下文,建立BFC有以下情況:

float的值不為none。

overflow的值不為visible。

display的值為table-cell, table-caption, inline-block中的任何一個。

position的值不為relative和static。

BFC的特性就是包裹浮動的元素。按照我的理解,當你創建BFC之後元素就會把裡面的東西視為自己的東西,包括浮動元素,然後創建一個私有領域給包裹進來。此外BFC還有還有以下特性。

1.讓原本會疊加的上下外邊距疊加無效。將想要邊距失效的兩個盒子分別放入一個父盒子,然後為父盒子創建BFC。

什麼是浮動以及浮動的清除方法什麼是浮動以及浮動的清除方法

2.創建BFC的元素將不會圍繞浮動元素,圖中文字用p標籤包裹並創建BFC,右上角浮動元素,可以看見文字並沒有環繞浮動元素。

什麼是浮動以及浮動的清除方法

# 三、清除浮動的方法

##清除浮動方法大致有兩類,一類是clear:both | left | right ,另一類則是創建BFC,細分又可以分為多種。#####1.透過在浮動元素末尾添加空的標籤例如並設定樣式為clear:both | left | right ,其他標籤br等亦可。###
<div class="parent">    
      <div class="child"></div>
    <div style="clear: both;"></div>
</div>
登入後複製
###優點:簡單。######缺點:增加了額外的標籤,並且很顯然這並不符合語義化。######  *使用br標籤和其自身的html屬性,br 有 clear=all | left | right | none;的屬性。 ###
<div class="parent">    
    <div class="child"></div>
    <br clear=&#39;all&#39;>
</div>
登入後複製
###優點:簡單程式碼量少,比空標籤語意化稍好。 ######缺點:增加了額外的標籤,而且很顯然這並不符合語意化。 ######2.使用::after偽元素(萬金油方法)######ps:由於IE6-7不支援:after,使用`zoom:1觸發hasLayout。其實是透過 content 在元素的後面產生了內容為空的區塊級元素######程式碼如下:###
.clearfix:after {    
    content:"";    
    display:block;    
    height:0;    
    visibility:hidden;//这一条可以省略,证明请看原文精益求精部分
    clear:both; 
}.clearfix {
    zoom:1;
}
登入後複製
###優點:結構和語意化完全正確,程式碼量居中。 ######缺點:重複使用不當會造成程式碼量增加。 ######偽元素還有一種寫法:###
// 用display:table 是为了避免外边距margin重叠导致的margin塌陷, 内部元素默认会成为 table-cell 单元格的形式
.clearfix:before, .clearfix:after {    content:"";    display:table;}
.clearfix:after{    clear:both;    overflow:hidden;}
.clearfix{ zoom:1; }
登入後複製

3.父元素设置 overflow:hidden,(PS:在IE6中还需要触发 hasLayout ,例如 zoom:1)

优点:不存在结构和语义化问题,代码量极少。

缺点:由于hidden的原因,当内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素,还会导致中键失效(鼠标中键)。

4.父元素设置 overflow:auto 属性

优点:同上

缺点:多个嵌套后,会有bug,详情看原文。

5.父元素也浮动

优点:代码少

缺点:总不能一直浮动到body吧。

6.父元素设置display:table

优点:结构语义化完全正确,代码量极少。

缺点:会造成盒模型的改变。

以上是什麼是浮動以及浮動的清除方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

vue中placeholder是什麼意思 vue中placeholder是什麼意思 May 07, 2024 am 09:57 AM

vue中placeholder是什麼意思

vue中空格怎麼寫 vue中空格怎麼寫 Apr 30, 2024 am 05:42 AM

vue中空格怎麼寫

vue中怎麼取得dom vue中怎麼取得dom Apr 30, 2024 am 05:36 AM

vue中怎麼取得dom

js中span是什麼意思 js中span是什麼意思 May 06, 2024 am 11:42 AM

js中span是什麼意思

js中rem是什麼意思 js中rem是什麼意思 May 06, 2024 am 11:30 AM

js中rem是什麼意思

vue中引入圖片的方法 vue中引入圖片的方法 May 02, 2024 pm 10:48 PM

vue中引入圖片的方法

span標籤的作用是什麼 span標籤的作用是什麼 Apr 30, 2024 pm 01:54 PM

span標籤的作用是什麼

瀏覽器插件是什麼語言寫的 瀏覽器插件是什麼語言寫的 May 08, 2024 pm 09:36 PM

瀏覽器插件是什麼語言寫的

See all articles