前端浮動知識(1)

2021-08-21 16:39:39 字數 438 閱讀 9785

浮動的特點:

1、浮動屬性float有四個值,分別是:left,right,none.inherit.

向左或向右時,浮動元素浮動到父級包圍元素的兩邊上。

2、浮動的元素不再占用空間,且浮動元素的層級要高於普通元素。

3、浮動的元素,一定是乙個塊級元素,不管之前是什麼元素。

4、如果浮動的元素沒有設定寬度,浮動後可能會變窄,因此給元素設定浮動屬性時要指定它的寬和高。

5、一行的多個元素,要浮動大家一起浮動。

如果對元素設定了浮動(float),元素就會脫離文件流,像乙隻小船一樣漂流在文件上,父元素不會包含這個浮動的內層元素,也就不會被內層元素撐開了。

css中,所有的元素都可以設定它浮動,給予它float屬性,那麼這個元素就會變成乙個塊級元素,但是如果使用了浮動之後沒有對其進行清除浮動,則會出現一些問題,導致結果不是你所想的那個,這很不爽。

前端 浮動清除

當元素浮動時,他就不再占用文件流中的任何空間了,因此,父列表實際上什麼東西都沒有,他就會收縮,從而隱藏列表的背景,解決這個問題的方法有以下集幾種 方法一 新增乙個清理的元素,但是會在頁面上新增不必要的元素,所以不建議使用這種辦法 方法二 讓父元素浮動,並且使用某個元素 比如站點頁尾 對它進行清理,以...

前端知識重新梳理 1

先上定義 display block 塊級元素 1,每個塊級元素會獨佔一行 2,缺省會自動填滿父級寬度 3,塊級元素可以設定padding和margindisplay inline 內聯元素 1,內聯元素不會獨佔一行,多個相鄰的內聯元素會排列在同一行裡,直到一行排列不下,才會新換一行,其寬度隨元素的...

web前端浮動塌陷

浮動塌陷概念 1,在文件流中,父元素的高度是預設被子元素撐開的。也就是說子元素多高父元素多高。2,但是當為子元素設定為浮動是,子元素會完全脫離文件流,此時會導致子元素無法撐開父元素高度,導致父元素高度塌陷。3,由於父元素高塌陷,則父元素下的所有元素便都會向上移,導致布局混亂。解決塌陷的方法 1,為浮...