div為空的時候 浮動沒有效果 浮動屬性

2021-10-17 08:36:11 字數 1682 閱讀 9008

div
特性浮動只有左右浮動。

浮動元素脫離標準流,不佔位置,會影響標準流。(標準流在下面,浮動元素漂在標準流的上面)

3.浮動首先建立包含浮動元素的父盒子。因為,浮動的元素總是找距離自己最近的父級元素對齊,但是不會超出父元素的邊框和內邊距。

浮動

4.父盒子裡的所有子盒子都設定浮動,才能顯示在一行上。也就是說,若其中乙個子級有浮動,則其他子級都需要浮動。

5.元素新增浮動後,會具有行內塊元素的特性。元素的大小完全取決於定義的大小或者預設的內容多少。浮動根據元素書寫的位置來顯示相應的浮動。

div1

行內元素

行內元素

6.總結

float 浮 漏 特

浮: 加了浮動的元素盒子是浮起來的,漂浮在其他的標準流盒子上面。 漏: 加了浮動的盒子,不佔位置的,它浮起來了,它原來的位置漏 給了標準流的盒子。 特: 特別注意,首先浮動的盒子需要和標準流的父級搭配使用, 其次 特別的注意浮動可以使元素顯示模式體現為行內塊特性。

正常標準流:

父容器被子容器高度撐開。

子容器浮動後:

子容器浮動,脫標,父容器沒有了高度,就不會被撐開。

當然,我們可以通過給父容器指定高度來解決塌陷問題。但是,很多情況下我們不方便給父容器指定高度,比如新聞,你不知道新聞裡有多少字。一般情況下,我們是讓下面的內容自動撐開父容器,而不是寫死高度。

.clearfix /* ie6、7 專有 */

DIV 再論清除浮動的空方法

css 使用浮動會造成布局的混亂,通常清除浮動的方法是,利用乙個如下樣式的空 div clear 更為優良的 css 是 clear after clear這個方法目前已經廣泛使用,口碑,都是這種用法。通過 after 偽類 after 和 針對 ie6 的獨立 css hack 來實現,完全相容主...

學習div的浮動

1.下圖是為設定浮動的效果 學習div的浮動屬性 效果圖 2.設定div1為左浮動.son1效果圖 當div1設定浮動,完全脫離了標準流之後,其他div視div1不存在,佔據了div1的位置,div2的內容環繞著浮動的容器。由於div1設定了margin屬性,所以div2的內容和div1之間存在一定...

居中div,居中浮動的元素

定位法 position absolute 如果子級div有定義寬和高的話就可以用這個方法。注意 margin top,和margin left的值均為高和寬值的一半 margin auto法 這個也可以是定位法。用這個方法要求子級div必須設定寬的值,不然沒有效果哦 margin auto是水平垂...