CSS基礎知識總結之浮動詳解

2021-09-30 00:11:10 字數 1432 閱讀 7635

前言

day4主要講述了乙個重點,那就是浮動

其中包含,什麼是浮動?浮動的作用語法及浮動的清除等

1、css的三種布局機制

css 提供了 3 種機制來設定盒子的擺放位置,分別是普通流(標準流)、浮動定位,其中:

1)普通流(標準流)

常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table
常用元素:span、a、i、em等
2)浮動

3)定位

2、浮動

2.1為什麼需要浮動?

為了達到網頁布局的需要,需要用浮動來完成對網頁的布局,如將多個盒子(div)水平排列成一行、實現盒子的左右對齊效果等

2.2什麼是浮動

浮動指脫離控制,能夠移動到制定的位置

2.3浮動的語法

選擇器

2.4浮動的屬性

屬性值

描述none元素不浮動(預設值

left元素向浮動

right元素向浮動

2.5浮動元素與父盒子的關係

2.6浮動元素與兄弟盒子的關係

在乙個父級盒子中,如果前乙個兄弟盒子是:

3、清除浮動(特別重要)

3.1為什麼要清除浮動

父盒子一般不設定高度,因為設定高度後子盒子會撐開父盒子,浮動元素不占有位置,但會對排版產生影響,清除浮動的本質就是為了解決父級元素因為子級浮動引起內部高度為0 的問題

3.2清除浮動的方法

1)通過clear清除

選擇器

clear 清除

屬性值

描述left

不允許左側有浮動元素(清除左側浮動的影響)

right

不允許右側有浮動元素(清除右側浮動的影響)

both

同時清除左右兩側浮動的影響

2)父級新增overflow屬性方法

可以給父級新增: overflow為 hidden| auto| scroll

基礎知識之浮動

本人前端小白一枚,正在自學前端希望利用部落格記錄並深入挖掘前端的知識。首先從浮動開始。css 的 float 浮動 會使元素向左或向右移動,其周圍的元素也會重新排列。float 浮動 往往是用於影象,但它在布局時一樣非常有用。比如在乙個大div中有兩個靠左右的布局時就可以使用浮動。style 當我們...

CSS基礎知識總結

1 使用css 2 css的優勢是容易修改樣式.標籤與css搭配起來使用能夠較好地修改格式。css中除了在標籤中編碼選擇器外,也可以在html本身的標籤中使用屬性來設定css格式。3 外部css的使用 4 css的優先順序基本原則是就近原則 因此在書寫是一般講外部式放在最前 在有相同權值的情況下,優...

css基礎知識總結

一.權重的比較 1.元素被選中 id選擇器 類選擇器 標籤選擇器 2.元素未選中 誰離目標近選誰 二.元素的居中 1.居中 文字居中 水平居中 單行 多行 屬性 text align center 垂直居中 單行文字 line height height 設定行高等於個高 多行文字 不設定高度,同時...