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 根據浮動排列的規則和浮動不能撐起父元素的高度...