---

• ?浮動的原理

inline-block

1. 使塊元素在一行顯示

2.使內嵌支持寬高

3.換行被解析

4.不設置寬度的時候，由內容撐開

5.在IE6，7下不支持塊標簽

?

浮動：left/right/none

元素加了浮動后，會脫離文檔流，按照指定的一個方向移動知道碰到父級的邊界，或者另外一個浮動元素停止。

1.使塊元素在一行顯示

2.使內嵌支持寬高

3.不設置寬度的時候寬度由內容撐開

4.脫離文檔流（*文檔流： 在文檔中可顯示對象在排列時所占用的位置）

5.提升層級半層 （層級：類比樓房）// 浮的不夠高，只夠元素本身

?

clear樣式 ：left/right/both/none 元素的某個方向上不能有浮動元素

?

---

?

• 清浮動

1.給父級也加浮動（不實用）

2.給父級加display：inline-block；（存在問題）？？

3.在浮動元素下加<div class="clear"></div>

clear｛height：0px；font-size：0；clear：both｝(在IE6下有最小高度的問題)

在IE6下高度小于19px的元素，高度會被當作19px處理。

解決辦法： font-size：0；

4.在浮動元素下加<br clear="all">(改了結構)

**// 在IE6,7下浮動元素的父級有寬度就不用清浮動，

?? haslayout 根據元素內容的大小 或者父級的父級大小來重新的計算元素的寬高

display：inline-block

height：（任何值除了auto）

width：（任何值除了auto）

float：（left 或 right）

zoom：（除了normal外任意值）**

5.給浮動元素的父級加｛zoom：1；｝?

：after｛content：""; display: block ; clear: both ;｝***用這種！！！***

6.給浮動元素的父級加overflow（在IE6下存在問題）

overflow溢出

auto 溢出默認顯示滾動條

scroll 默認就顯示滾動條

hidden 溢出隱藏

?

---

?

---

?

?

?

?

• 浮動問題

?

在IE6,7下要并在同一行的元素都要加浮動

?

IE6下雙邊距BUG

?

在IE6下，塊元素有浮動和橫向的margin。橫向的margin值會被放大成兩倍

?

在IE6,7下l幾px的間隙問題

?

在IE6,7下li本身沒浮動，但是內容浮動了li下就會多出來幾px

?

解決辦法：

?

1，給li加浮動

?

2，給li加vertical-align：top；（可清理圖片下的空隙）

?

在IE6下高度小于19px，高度會被當做19px來處理

解決辦法：overflow：hidden

?

轉載于:https://www.cnblogs.com/BBeyes/p/6530069.html

總結

以上是生活随笔為你收集整理的HTMLCSS学习笔记（四）----浮动原理及清浮动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。