CSS 清浮動 相關方法

示例-1

lang="en">

charset="utf-8" />
documenttitle>
type="text/css">
imgstyle>
head>
浮動使父級標籤塌陷
src="img/small.gif"
alt="" />
div>
body>
html>

lang="en">

charset="utf-8" />
documenttitle>
type="text/css">
.inside
style>
head>
浮動使父級標籤塌陷
class="inside">
div>
div>
body>
html>

在包裹著浮動元素的父級底部加入

或

浮動使父級標籤塌陷

src="img/small.gif"
alt="" />
clear="both" />
div>

設定包裹著浮動元素的父級樣式overflow: auto;或overflow: hidden;(效果同上圖)(僅試用於浮動元素為的場景)

1-利用偽元素 : :before 和 : :after 構建標籤填充

2-新增無內容塊級實際標籤設定清楚浮動

lang="en">

charset="utf-8" />
documenttitle>
type="text/css">
.inside
::before,
::after
::after
style>
head>
浮動使父級標籤塌陷
class="inside">
div>
div>
body>
html>

lang="en">

charset="utf-8" />
documenttitle>
type="text/css">
.inside
.clearfix
style>
head>
浮動使父級標籤塌陷
class="inside">
div>
class="clearfix">
p>
div>
body>
html>

浮動相關知識及清浮動方法

先了解一下文件流的概念，所謂文件流，就是指文件中可以顯示的物件在排列是所佔的位置。而浮動就是 使我們的元素脫離正常文件流，按照指定方向發生移動，直到碰到它的父元素邊界或另乙個浮動元素的邊界 浮動是讓元素水平方向移動，不能上下移動 浮動屬性 float left 左浮動 float right 右浮動...

清浮動方法

1.加高 問題 擴充套件性不好 2.父級浮動 問題 頁面中所有元素都加浮動，margin左右自動失效 floats bad 3.inline block 清浮動方法 問題 margin左右自動失效 4.空標籤清浮動 問題 ie6 最小高度 19px 解決後ie6下還有2px偏差 5.br清浮動 問題...

CSS 清浮動詳解

使元素脫離文件流，按照指定方向發生移動，遇到父級邊界或者相鄰的元素停下來。脫離文件流 此時浮動元素在文件中不佔位置，飄了起來 1.塊元素在一行顯示 2.內聯元素支援寬高 3.預設內容撐開寬度 4.脫離文件流 5.提公升層級半層 只能夠放元素本身，這個元素裡的內容會被擠出來 6.父元素的高度無法被撐開...