1. 程式人生 > >HTML-浮動與清除浮動

HTML-浮動與清除浮動

1.浮動:float:left;right;none

2.浮動的模組是沒有高度,不佔用位置的,如下:



如果給上面的div1和div2加上左浮動,則div3就會上移,出現如下所示效果:


為了讓div1和div2佔有它原來的位置,讓div3顯示在它們下面,則要清除浮動。

關於浮動的清除有以下幾種:

1)clear  (clear:both;)

新增額外的標籤(如:京東)


京東案例:


閉合浮動


給父盒子新增偽元素(如:新浪),效率比較高(儘管看著多出來很多程式碼)


zoom:1;        主要是用來解決IE6的問題(因為IE6是不認.clearfix:after的)

3.開發工具:WebStorm

4.傳統的清除浮動的方式:

1)clear:both;          (子元素)

2)overflow:hidden;         (父元素)

3)現在常用:偽類、額外標籤法