浮動的清除 四種方法

2021-08-28 22:58:20 字數 1664 閱讀 7410

原文:

前言 -- 乙個父親不能被自己浮動的兒子,撐出高度。

我們本以為這些li,會分為兩排,但是,第二組中的第1個li,去貼靠第一組中的最後乙個li了。

第二個div中的li,去貼第乙個div中最後乙個li的邊了。

原因就是因為div沒有高度,不能給自己浮動的孩子們,乙個容器。

只要浮動在乙個有高度的盒子中,那麼這個浮動就不會影響後面的浮動元素.所以就是清除浮動帶來的影響了.

乙個父親不能被自己浮動的兒子,撐出高度。但是,只要給父親加上overflow:hidden; 那麼,父親就能被兒子撐出高了。這是乙個偏方

→ 設定height

→ 設定height

→ clear:both;

浮動確實被清除了,不會互相影響了。但是有乙個問題,就是margin失效。兩個div之間,沒有任何的間隙了。

我們發現,隔牆法好用,但是第乙個div,還是沒有高度。如果我們現在想讓第乙個div,自動的根據自己的兒子,撐出高度,我們就要想一些「小伎倆」,「奇淫技巧」。

內牆法的優點就是,不僅僅能夠讓後部分的p不去追前部分的p了,並且能把第乙個div撐出高度。這樣,這個div的背景、邊框就能夠根據p的高度來撐開了。這個屬性的本意,就是將所有溢位盒子的內容,隱藏掉。但是,我們發現這個東西能夠用於浮動的清除。

我們知道,乙個父親,不能被自己浮動的兒子撐出高度,但是,如果這個父親加上了overflow:hidden;那麼這個父親就能夠被浮動的兒子撐出高度了。這個現象,不能解釋,就是瀏覽器的小偏方。

並且,overflow:hidden;能夠讓margin生效。

清除浮動的四種方法

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

清除浮動的四種方法

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

css清除浮動四種方法

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