左懸浮: float:left;
右懸浮: float:right;
float的用途比較廣, 這裡簡單的介紹下集中常有的用法:
如果子元素懸浮了,會造成父元素的高度塌陷.這塊涉及到了清除懸浮,下一章會提及清除懸浮的講解
那麼言歸正傳,
第一個現象float=inline-block懸浮會是4個方塊變成行內塊模式的樣式呈現:如下圖所示
<style> div{ width:200px; height:200px; background-color: pink; border:1px solid black; float:left; } </style><body> <div></div> <div></div> <div></div> <div></div></body>第二現象:
如下圖所示, 由於第一個懸浮起來了,因此第二個塊元素會呈現在第一個下面.
但是後面一個元素懸浮起來,不會越過到前面一個元素上面,如第四個塊元素懸浮,但是第三個沒有懸浮.第四季塊元素保持在原來位置上.
<style> .first-one{ float:left; background-color:green; } .second-one{ background-color:purple; } .third-one{ background-color:blue; } .fourth-one{ float:left; background-color:grey; } div{ width:200px; height:200px; background-color: pink; border:1px solid black; font-size:30px; } </style><body> <div class= first-one></div> <div class= second-one></div> <div class= third-one></div> <div class=fourth-one></div></body>第三個現象:
如果元素全部漂浮, 父元素剩餘寬度不夠支持子元素在該行排列那麼他會向上一級靠齊
本文轉自:https://segmentfault.com/a/1190000022669455
總結到此這篇關於淺析HTML 懸浮float的用法的文章就介紹到這了,更多相關html 懸浮float內容請搜索武林網以前的文章或繼續瀏覽下面的相關文章,希望大家以後多多支持武林網!