css清除浮動帶來的負面影響

2021-09-26 08:47:53 字數 2192 閱讀 3692

來看乙個實驗:現在有兩個div,div身上沒有任何屬性。每個div中都有li,這些li都是浮動的。

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

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

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

清除浮動方法1:給浮動的元素的祖先元素加高度。

如果乙個元素要浮動,那麼它的祖先元素一定要有高度。高度的盒子,才能關住浮動。

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

清除浮動方法2:clear:both;

網頁製作中,高度height很少出現。為什麼?因為能被內容撐高!那也就是說,剛才我們講解的方法1,工作中用的很少。

腦弄大開:能不能不寫height,也把浮動清除了呢?也讓浮動之間,互不影響呢?

→ 這個div寫乙個clear:both;屬性

clear:both;

clear就是清除,both指的是左浮動、右浮動都要清除。意思就是:清除別人對我的影響。

這種方法有乙個非常大的、致命的問題,margin失效了。

清除浮動方法3:隔牆法

.cl.h16

近些年,有演化出了「內牆法」:

清除浮動方法4:overflow:hidden;

overflow就是「溢位」的意思, hidden就是「隱藏」的意思。

overflow:hidden;

表示「溢位隱藏」。所有溢位邊框的內容,都要隱藏掉。

內容太多,溢位了盒子:

overflow:hidden; 溢位盒子邊框的內容,隱藏了。

本意就是清除溢位到盒子外面的文字。但是,前端開發工程師又發現了,它能做偏方。

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

div
清除浮動總結與案例

加高法:

浮動的元素,只能被有高度的盒子關住。 也就是說,如果盒子內部有浮動,這個盒子有高,那麼妥妥的,浮動不會互相影響。但是,工作上,我們絕對不會給所有的盒子加高度,這是因為麻煩,並且不能適應頁面的快速變化。

→ 設定height   

→ 設定height

clear:both;法

最簡單的清除浮動的方法,就是給盒子增加clear:both;表示自己的內部元素,不受其他盒子的影響。

→ clear:both;

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

隔牆法:

在兩部分浮動元素中間,建乙個牆。隔開兩部分浮動,讓後面的浮動元素,不去追前面的浮動元素。

牆用自己的身體當做了間隙。

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

內牆法:

內牆法的優點就是,不僅僅能夠讓後部分的p不去追前部分的p了,並且能把第乙個div撐出高度。這樣,這個div的背景、邊框就能夠根據p的高度來撐開了。

overflow:hidden;

這個屬性的本意,就是將所有溢位盒子的內容,隱藏掉。但是,我們發現這個東西能夠用於浮動的清除。

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

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

css中浮動和清除浮動帶來的影響

有很多時候,我們都會用到浮動,而我們有時候對浮動只是一知半解,卻不是太清楚它到底是怎麼回事,不知道各位有沒有和我一樣的感覺,只知道用它,卻不知道它到底是怎麼回事,所以,在學習的過程中,就要把乙個概念不是很清晰的問題把它弄清楚了,便於我們以後的使用。早些時候,w3c規定出來的浮動實際並不是為了布局所用...

如何清除浮動帶來的影響

在前端開發中,清除浮動的方法有多種,開發人員可以根據自己的喜好選擇不同的方式。1 將設定float的元素的父元素也設定float。父元素也設定浮動,侷限性較大。2 設定父元素的overflow為hidden。3 設定父元素的display為inline block。缺點 可能不符合情況要求。4 浮動...

遊戲植入廣告對品牌的負面影響

品牌廣告主對於遊戲中的廣告存在一定的顧慮,暴力 血腥 令人沉迷是許多人對遊戲的看法,這種負面的看法會不會轉移到遊戲中傳播的品牌?首先我們設立乙個基礎假定 消費者在買商品時總是以達到自己利益最大化為目的,而所謂利益最大化,就是在商品給帶來自己一定效用時,所耗費的成本最小。或者是程式設計客棧在一定花費的...