CSS之浮動布局

2022-07-26 20:42:13 字數 1710 閱讀 5275

1.什麼是浮動:

在我們布局的時候用到的一種技術,能夠方便我們進行布局,通過讓元素浮動,我們可以使元素在水平上左右移動,再通過margin屬性調整位置。

2.浮動的原理;

使當前元素脫離普通流,相當於浮動起來一樣,浮動的框可以左右移動,直至它的外邊緣遇到包含框或者另乙個浮動的邊緣

3、浮動的生成:

使用css屬性 float:left/right/none左浮動/右浮動/不浮動(預設)

4、浮動的影響:

5.清除浮動與閉合浮動:

先說說我個人的理解:我將解釋一下我理解的閉合浮動與清除浮動

清除浮動:使用clear元素清除外面浮動,解決外面浮動對自己的影響

閉合浮動:當前塊級中,其子元素使用了浮動,會給當前塊內部和塊外部的布局帶來影響,所以當前塊中的浮動閉合,能將影響最大化清除。舉例子:

class="

box1

">

class="

child-1

">child-1

class="

child-2

">child-2

class="

box2

">

圖一:

圖二:

圖三:區分清除浮動與閉合浮動(個人理解:在外面解決問題,內部問題未解決) 清除浮動:對box2使用:clear:both

圖四:閉合浮動(在內部解決問題:同時解決外部問題)閉合浮動:對box1使用overflow:hidden(其中一種方式,後面還有更好的方式)

6.閉合浮動方法(常見的幾個):

1.通過在浮動元素的末尾新增乙個空元素,設定 clear:both屬性;

缺點:成本太高,額外新增了乙個元素,維護困難

class="

box1

">

class="

child-1

">child-1

class="

child-2

">child-2

"clear: both;

">

class="

box2

">

2.通過設定父元素overflow或者display:table屬性來閉合浮動,給box1新增overflow:hidden

3.使用偽元素:after,下面是**,給box1新增上clearfloat這class即可

/*

適配ie6

*/.clearfloat

.clearfloat:after

**:

css布局之浮動

css布局中說到浮動,浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另乙個浮動 框的邊框為止。由於浮動框不在文件的普通流中,所以文件的普通流中的塊框表現得就像浮動框不存在一樣。一float屬性的定義和用法 float屬性 設定元素浮動 可能的值 none 不浮動,在文件流內,預設 left ...

CSS布局之浮動 清除浮動

1.2 浮動 float 小結 1.3 浮動 float 的應用 重要 1.4 浮動 float 的擴充套件 2.清除浮動 2.4 清除浮動總結 概念 元素的浮動是指設定了浮動屬性的元素會 脫離標準普通流的控制 移動到指定位置。作用 讓多個盒子 div 水平排列成一行,使得浮動成為布局的重要手段。可...

CSS 布局機制之浮動

網頁布局的核心就是使用css來擺放盒子css 提供了3 種機制來設定盒子的擺放位置,分別是普通流 標準流 浮動和定位,其中 普通流 標準流 塊級元素會獨佔一行,從上向下順序排列 常用元素 div hr p h1 h6 ul ol dl form table 行內元素會按照順序,從左到右順序排列,碰到...