清除浮動的四種方法

今天面試 被問了乙個常考的問題 如何清除浮動，本身這個技術沒總結過，加上嘴笨 ，回答的不怎麼樣，於是簡單的整理一下

總是要清除浮動，為什麼呢，使用浮動之後出現什麼預期之外的顯示效果要清除浮動，總結一下，我認為是為了解決浮動帶來的高度塌陷

2.高度塌陷

先給乙個父元素 只設定寬度，不設定高度，給乙個邊框，這樣會看的更清楚。再給兩個子元素 first 和second 正常設定寬高，先不設定浮動，這兩個子元素就會把父元素的高度給 撐起來

>

.container
#first
#second
style
>
head
>
>
class
="container"
>
"first"
>
div>
"second"
>
div>
div>
body
>

>

.container
#first
#second
style
>

3.1 隔牆法或者叫額外標籤法

在浮動的塊底下 ，新增乙個新的空標籤，並且設定屬性 clear:both

清楚了浮動，父元素檢測出了所有子元素的高度

>

.container
#first
#second
.clear
style
>
head
>
>
class
="container"
>
"first"
>
div>
"second"
>
div>
class
="clear"
>
div>
div>

優點：簡單、**少 父元素就一行**

缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。

>

.container
style
>

從**中就可以看出來，和第一種方法類似，只不過是用偽元素替代了那個空標籤

偽元素設定為塊元素

>

.container
#first
#second
.container:after
style
>

原理同上 只不過使用了兩個偽元素 ，**更加簡單

>

.container
#first
#second
.container:after, .container:before
style
>

父級div手動定義height，就解決了父級div無法自動獲取到高度的問題

適合於高度固定的布局，自適應布局 就不行了 獲取不到具體高度

浮動的清除 四種方法

原文 前言 乙個父親不能被自己浮動的兒子，撐出高度。我們本以為這些li，會分為兩排，但是，第二組中的第1個li，去貼靠第一組中的最後乙個li了。第二個div中的li，去貼第乙個div中最後乙個li的邊了。原因就是因為div沒有高度，不能給自己浮動的孩子們，乙個容器。只要浮動在乙個有高度的盒子中,那麼...

清除浮動的四種方法

清除浮動主要是為了解決父元素因為子元素的浮動引起的內部高度為0的問題。清除浮動主要是將要清除浮動的元素轉化成乙個bfc塊級格式化上下文，相當於乙個盒子，以此來隔絕外部的影響。即bfc元素特性表現原則就是 內部子元素再怎麼翻江倒海，翻雲覆雨，都不會影響外部元素。因此避免了margin的穿透，清除浮動。...

css清除浮動四種方法

清除浮動的本質是清除浮動元素脫離標準流造成的影響。為什麼要清楚浮動？父級沒高度 子盒子浮動了 影響下面布局，我們就應該清除浮動了。清除浮動的四種方法 1.額外標籤法。在最後乙個浮動標籤之後新增乙個額外的塊級標籤，比如空div標籤，設定樣式 2.給浮動標籤的父級元素新增overflow屬性，屬性值設定...