在建設(shè)網(wǎng)站時過多的使用浮動會產(chǎn)生的問題及其解決方案
發(fā)布時間：2021-03-29來源：admin
在一個父元素中，如果有子元素浮動(float)，而且其父元素也沒有設(shè)置高度這個時候由于子元素不占據(jù)頁面空間，經(jīng)常會出現(xiàn)父元素坍塌的問題<br />
1.給父級元素加高度<br />
這種方法不推薦使用因為它只適合高度固定的布局，而一般父盒子都是由內(nèi)容撐起來的。<br />
2.在結(jié)尾處添加空div標(biāo)簽clear:both。<br />
在寫入了clear both的元素后，它不再允許周圍有浮動的元素產(chǎn)生，假設(shè)有兩個div,一個浮動一個清楚浮動，那么浮動的div就喪失了浮動的效果，未浮動的div 所在的位置也就撐起了父元素的高度就不會造成高度坍塌。<br />
添加一個div標(biāo)簽并定義一個類名，給類名添加樣式clear:both，將該div標(biāo)簽放到父元素內(nèi)容結(jié)束前的位置<br />
缺點：會多加CSS和HTML標(biāo)簽<br />
3.給父級元素定義 overflow:hidden{可以溢出隱藏，即當(dāng)內(nèi)容元素的高度大于其包含塊的高度時，設(shè)置該屬性即可把內(nèi)容區(qū)域超出來的部分隱藏，使內(nèi)容區(qū)域完全包含在該包含塊中。}<br />
這個的目的是讓父元素包住這個脫離了文檔流的浮動元素，<br />
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏<br />
4.給父級div定義偽類：after<br />
就是創(chuàng)建虛假的元素，插入到目標(biāo)的元素的內(nèi)容之前或者之后。
聯(lián)系方式： 0755-84185494
