CSS中清除浮動的作用講解與演示

浮動在布局方面會起到很大作用，塊級元素都是獨佔一行，要想讓多個塊級元素同一行展示，就需要浮動

如果乙個div1中的子div進行了浮動，而子div的高度不是事先確定好的，而是通過js動態提供的，這也就意味著，子div在頁面載入之前是沒有高度的，那麼div1作為父元素，必然也不能直接寫死乙個高度（當父子元素高度不一致時，布局上會出現不理想的效果）

lang

="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
浮動與清除浮動學習title
>
src=
"">
script
>
>
#div1
#son1
#son2
style
>
>$(
function()
)script
>
head
>
>
"div1"
>
"son1"
>
div1子元素1div
>
"son2"
>
div1子元素2div
>
div>
style
="border
: 2px solid blue;
">
我是div1的兄弟元素div2
div>
body
>
html
>

從上圖可以看出，div1的高度為0，只出現了乙個div1的邊框，你可能會說，div1沒有設定高度，肯定沒有高度呀，但是div1有子div元素，子的div的高度理論上是會撐起來父元素的高度。

然而結果卻沒有，這是因為div1的子元素設定了浮動，浮動之後該元素脫離了文件流，它的高度與div1是沒有關係的，那麼此時div2作為兄弟元素，出現的位置在div1的下方其實就可以理解了，但是這種效果並不是我們希望看到的。

當某元素的高度不能直接寫死，且其子元素設定了浮動，此時因為子元素脫離了文件流，它的高度是不能直接將父元素撐起來的，就會導致父元素在文件流中沒有高度，然後被其兄弟元素佔據位置，從而導致布局混亂的結果

基於上述浮動後的影響，要解決的問題就是：

子元素浮動後，子元素的高度要撐滿其父元素，這樣才可以使得父元素在文件流中的高度與其子元素是一樣的，也就解決了出現布局錯亂的情況

怎樣讓乙個浮動元素的高度能撐起其父元素呢？

答案就是：新增清除浮動的**

從上圖可以看出，div1的高度被子元素撐起來了，浮動帶來的影響在清除浮動後已經消失了

lang

="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
浮動與清除浮動學習title
>
src=
"">
script
>
>
#div1
#son1
#son2
/*清除浮動***/
.clearfloat1
style
>
>$(
function()
)script
>
head
>
>
"div1"
class
="div1 clearfloat2"
>
"son1"
>
div1子元素1div
>
"son2"
>
div1子元素2div
>
class
="clearfloat1"
>
div>
div>
style
="border
: 2px solid blue;
">
我是div1的兄弟元素div2
div>
body
>
html
>

CSS中浮動與清除float浮動

浮動語法 float none left right float 定義網頁中其它文字如何環繞該元素顯示 浮動的目的 就是讓豎著的東西橫著來 橫向排列元素 有三個取值 left 元素活動浮動在文字左面 right 元素浮動在右面 none 預設值，不浮動。清除浮動clear left right bo...

css中的浮動及清除浮動

float 文件流1.float left right none inherit 2.文件流是文件中可顯示物件在排列時所占用的位置。3.浮動的定義 在非ie瀏覽器下，當容器的高度為auto，且容器中的內容中有浮動的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢位到容器外面而影...

CSS中的浮動和清除浮動

浮動核心就一句話 浮動元素會脫離文件流並向左 向右浮動，直到碰到父元素或者另乙個浮動元素。請默念3次！浮動最初設計的目的並沒那麼多事兒，就只是用來實現文字環繞效果而已，如下所示 但是早期的前端開發者發現 浮動的元素可以設定寬高並且可以內聯排列，是介於inline和block之間的乙個神奇的存在，在i...