清除浮動的四種方法

清除浮動主要是為了解決父元素因為子元素的浮動引起的內部高度為0的問題。

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

1、額外標籤法（不推薦）

clear：both

2、父級新增overflow屬性（不推薦）

overflow：hidden

通過觸發bfc方式實現清除浮動

3、使用after偽元素清除浮動（推薦）

.box:after

.box:after,

.box:before
.box:after:

浮動的清除 四種方法

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

清除浮動的四種方法

今天面試 被問了乙個常考的問題 如何清除浮動，本身這個技術沒總結過，加上嘴笨 回答的不怎麼樣，於是簡單的整理一下 1.為什麼清除浮動 總是要清除浮動，為什麼呢，使用浮動之後出現什麼預期之外的顯示效果要清除浮動，總結一下，我認為是為了解決浮動帶來的高度塌陷 2.高度塌陷 先給乙個父元素 只設定寬度，不...

css清除浮動四種方法

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