CSS筆記11 浮動

2021-10-14 12:23:17 字數 1032 閱讀 6087

1.浮動的定義及作用

定義:

float屬性用於建立浮動框,將其移動到一遍,直至觸及父盒子的邊緣或者另外乙個浮動框的邊緣.

作用:

將多個塊級盒子水平排成一列.

準則:

多個塊級元素縱向排列找標準流,多個塊級元素橫向排列找浮動.

語法:

選擇器
屬性值

描述none

不浮動(預設)

left

左浮動right

右浮動2.浮動的特性

3.浮動元素與標準流父級元素搭配使用

為了約束浮動元素的位置,網頁布局一般採取的策略是:

先用標準流的父元素排列上下位置,再用內部的子元素進行浮動排列.

demo:

.box

.box div

.box div:nth-child(2n)

class

="box"

>

class

="son1"

>

div>

class

="son2"

>

div>

class

="son3"

>

div>

div>

效果:

4.浮動布局的注意點

5.文章參考鏈結

a. b.

CSS(11)CSS浮動和清理

浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。由於浮動框不在文件的普通流中,所以文件的普通流中的塊框表現得就像浮動框不存在一樣。1 請看下圖,當把框 1 向右浮動時,它脫離文件流並且向右移動,直到它的右邊緣碰到包含框的右邊緣 2 再請看下圖,當框 1 向左浮動時,它脫...

CSS學習筆記 浮動

float left float right float none css的float 屬性可以使乙個元素脫離正常的文件流,然後被安放到它所在容器的的左端或者右端,並且其他的文字和行內元素圍繞它安放。除了left和right,float還有乙個屬性 none,用來防止元素浮動。有一些列特定規則控制著...

css浮動清除筆記

1.在文件流中內容的高度可以撐起父元素的高度 2.在浮動流中浮動的元素是不可以撐起文件流父元素的高度 如果父元素也是浮動的就可以 可以看到將p元素設定浮動之後,並沒有撐起父元素div 我是文字1 我是文字1 我是文字1 我是文字2 我是文字2 我是文字2 根據浮動排列的規則和浮動不能撐起父元素的高度...