CSS核心內容之浮動

1.向指定的方向浮動，並且讓出空間 2.如果後面的元素也是浮動的，那麼後面的元素就會在碰到前面的浮動的元素或者邊框時，就定位在那裡 3.如果後面的元素沒有浮動，則該元素就會在浮動的元素的下面 4.行內元素和塊元素都可以浮動，行內元素浮動後會變成塊元素 5.浮動的元素不占用空間

div1 div2 div3 div3 span1 span2

效果如下：

當然也可以使用多元素選擇器把兩個標籤放在一起來調整樣式．

修改後的**如下：

div1 div2 div3 div3 span1 span2

效果如下：

可以看到基本效果並沒有改變，只是多個乙個邊框而已．

那麼浮動是怎麼讓出空間的呢？？

來看下面的**：

div1 div2 div3

效果如下：

如果讓div-box2也浮動起來，效果會是怎麼樣的呢？？

給div-box2新增浮動，**如下：

div1 div2 div3

效果如下：

來看下面的**：

div1 div2 div3

效果如下：

當乙個大的div包括了若干小div，如果父div的內的所有子div都浮動，則父div的高度為0.

當把乙個div設定成右浮動時，這個div脫離標準流並且向右浮動，直到它的右邊緣接觸到包含框的右邊緣．

**如下：

div1 div2 div3

效果如下：

如果浮動元素的高度不同，那麼當其向下移動的時候，可能會被其他浮動元素"卡住"，直到調整到合適的高度時，才會恢復到正常的高度

**如下：

div1 div2 div3 div3 div3 div3 div3 div3 div3 div3 div3

效果如下：

CSS核心內容之浮動

1.向指定的方向浮動，並且讓出空間 2.如果後面的元素也是浮動的，那麼後面的元素就會在碰到前面的浮動的元素或者邊框時，就定位在那裡 3.如果後面的元素沒有浮動，則該元素就會在浮動的元素的下面 4.行內元素和塊元素都可以浮動，行內元素浮動後會變成塊元素 5.浮動的元素不占用空間 div1 div2 d...

JPA核心內容

二對應的狀態三.物件之間的關係四.單向多對一的配置五二級快取 id generatedvalue strategy generationtype.identity sequence auto table private long id 臨時,持久,刪除，游離乙個持久化狀態的物件，如果被修...

CSS核心內容標準流盒子模型浮動定位

css核心內容標準流盒子模型浮動定位，了解了核心內容才能用css設計出乙個簡單的頁面一基礎在了解核心內容之前需要先了解html中的兩種標籤塊級元素，行內元素塊級元素乙個塊級元素佔滿一行行內元素在一行中行內元素依次填充在css中可以將行內元素轉換為塊級元素，通過的是displ...

CSS核心內容之浮動

CSS核心內容之浮動

JPA核心內容

CSS核心內容 標準流 盒子模型 浮動 定位

相關推薦

CSS核心內容標準流盒子模型浮動定位