HTML元素浮動布局

2021-10-21 14:59:55 字數 2495 閱讀 3838

元素浮動布局float

1.文字環繞,水平布局

<

!doctype html>

"utf-8"

>

<

/title>

"text/css"

>

.red

.green

.a,.b,

.c.a

.b .c

<

/style>

<

/head>

文字環繞<

/p>

="red"

>

<

/div>

="green"

>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

<

/div>

橫向排版布局<

/p>

="a"

>

<

/div>

="b"

>

<

/div>

="c"

>

<

/div>

<

/body>

<

/html>

2.第一行浮動布局,第二行不浮動

注意:要在第一行的三塊div外部套乙個div,這個div不浮動

div預設情況下width為100%,即佔據一行

div的樣式overflow:auto 表示對超出邊界的元素,父元素可以做相應的調整。

clear:left/right/both 清除浮動

當不希望當前元素收到前面元素影響時,就給當前元素增加clear樣式

(簡單來說,誰不希望收到影響,誰就增加clear樣式)

<

!doctype html>

"utf-8"

>

<

/title>

"text/css"

>

.a .b

.c .a,

.b,.c

.second

.outer

<

/style>

<

/head>

="outer"

>

="a"

>

<

/div>

="b"

>

<

/div>

="c"

>

<

/div>

<

/div>

="second"

>

<

/div>

<

/body>

<

/html>

對話方塊案例(含clear用法)

<

!doctype html>

"utf-8"

>

<

/title>

"text/css"

>

ul li

<

/style>

<

/head>

"float: left;"

>hello<

/li>

"float: right;"

>hi<

/li>

"float: left;"

>hhh<

/li>

"float: right;"

>

233<

/li>

<

/ul>

<

/body>

<

/html>

補充

浮動元素在排列時,只參考前乙個元素位置即可

(若都為浮動元素,則不會重疊覆蓋的)

浮動元素的重疊問題:

1.浮動元素不會覆蓋文字內容

2.浮動元素不會覆蓋內容(本身也屬於文字,是特殊的文字)

3.浮動元素不會覆蓋表單元素(輸入框、單選按鈕、核取方塊、按鈕、下拉選擇框)

右浮動會使得顯示順序與書寫順序相反

<

!doctype html>

"utf-8"

>

<

/title>

"text/css"

>

.a,.b,

.c<

/style>

<

/head>

="a"

>

1<

/div>

="b"

>

2<

/div>

="c"

>

3<

/div>

<

/body>

<

/html>

html 浮動元素

在css布局中分為內聯元素 display inline 和塊狀元素 display block 塊狀元素缺省會佔據一行,可設定高度寬度以及邊距,而內聯元素不會也不能設定。常見的內聯元素有 a span input select,常見的塊狀元素有 h1 h6,p,div,ul,table。浮動元素是...

HTML裡面的浮動布局

flaot left flaot right 左浮動 和 右浮動 float none 不浮動現在來展示一下浮動的用法 例如 text css 清除內外邊距 box left right style box left div right div div 現在我們可以看到兩個 left right兩個...

前端 HTML 塊元素 行內元素 浮動,定位

1.9 塊狀元素和內聯元素的區別 a 塊狀元素單獨成行吧,不用其他元素一起在一行,內聯元素可以多個併排在一行 b 塊狀元素內可以有子元素,內聯元素不能包括子元素 c 塊狀元素可以設定寬高,內聯元素不能設定寬高 d 塊狀元素和內聯元素可以通過display屬性進行互相轉換 display inline...