浮動(dòng)
一,標(biāo)準(zhǔn)流標(biāo)準(zhǔn)流就是瀏覽器默認(rèn)布局的方式玉雾,也就是從上往下色建,從左向右的默認(rèn)的排班布局的方式。
二,浮動(dòng)布局方式浮動(dòng)的本質(zhì):就是解決圖片和文字并排的格式問(wèn)題蜘澜。
元素浮動(dòng)后,會(huì)脫離標(biāo)準(zhǔn)流响疚,但是還會(huì)影響標(biāo)準(zhǔn)流的布局鄙信。浮動(dòng)的元素會(huì)不占據(jù)標(biāo)準(zhǔn)流的空間。但是會(huì)影響標(biāo)準(zhǔn)流中的文本的排版.
三,浮動(dòng)的特性
1.浮動(dòng)脫離標(biāo)準(zhǔn)流忿晕,不占位置装诡,但會(huì)影響標(biāo)準(zhǔn)流。浮動(dòng)只有左右浮動(dòng)践盼。
2. 浮動(dòng)的元素A排列位置鸦采,跟上一個(gè)元素(塊級(jí))有關(guān)系。如果上一個(gè)元素有浮動(dòng)咕幻,則A元素頂部會(huì)和上一個(gè)元素的頂部對(duì)齊渔伯;如果上一個(gè)元素是標(biāo)準(zhǔn)流,則A元素的頂部會(huì)和上一個(gè)元素的底部對(duì)齊肄程。
3.一個(gè)父盒子里面的子盒子锣吼,如果其中一個(gè)子級(jí)有浮動(dòng)的选浑,則其他子級(jí)都需要浮動(dòng)。這樣才能一行對(duì)齊顯示吐限。
4.浮動(dòng)根據(jù)元素書寫的位置來(lái)顯示相應(yīng)的浮動(dòng)鲜侥。
5. 元素添加浮動(dòng)后,如果沒(méi)有設(shè)置寬高的話诸典,元素會(huì)具有行內(nèi)塊元素的特性描函。元素的大小完全取決于定義的大小或者默認(rèn)的內(nèi)容多少。也就是具有了包裹性狐粱。
6.浮動(dòng)具有破壞性舀寓,元素浮動(dòng)后,破壞來(lái)原來(lái)的正常流布局肌蜻,造成內(nèi)容塌陷互墓。如果一個(gè)標(biāo)準(zhǔn)流的父盒子真椿,沒(méi)有設(shè)置高的情況下愕撰,所有的子盒子進(jìn)行了浮動(dòng),那么父盒子的高度會(huì)塌陷成0.
四,解決浮動(dòng)破壞性造成的高度塌陷的問(wèn)題1,在父盒子上設(shè)置overflow: hidden坷澡;之后豆挽,父盒子具有的包裹性育谬,就不會(huì)出現(xiàn)高度塌陷的問(wèn)題了。