html清除浮動的6種方法示例

2021-07-23 12:01:18 字數 1137 閱讀 8610

html清除浮動的6種方法示例

使用display:inline-block會出現的情況:

1.使塊元素在一行顯示

2.使內嵌支援寬高

3.換行被解析了

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

5.在ie6,7下步支援塊標籤

由於inline-block屬性換行的時候被解析(有間隙)故解決方法使用浮動float:left/right

使用浮動時出現的情況:

1.使塊元素在一行顯示

2.使內嵌元素支援寬高

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

4.換行不被解析(故使用行內元素的時候清除間隙的方法可以使用浮動)

5.元素新增浮動,會脫離文件流,按照指定的乙個方向移動,直到碰到父級的邊界或者另乙個浮動元素停止(文件流是文件中可顯示物件在排列時所占用的位置)

複製**

**如下:

div1

div2

span1

span2

下面的**只有box1浮動,則box1,box2重疊一起。兩者都浮動就不會重疊

複製**

**如下:

清浮動的方法:

1.給父級也加浮動(這種情況當父級margin:0 auto;時不居中)

複製**

**如下:

2.給父級加display:inline-block;(同方法1,不居中。只有ie6,7居中)

複製**

**如下:

3.在浮動元素下加

.clear但是在ie6下,塊元素有最小高度,即當height<19px時,預設為19px,解決方法:font-size:0;或overflow:hidden;

複製**

**如下:

4.在浮動元素下加

複製**

**如下:

5.給浮動元素父級加

:after

複製**

**如下:

6.給浮動元素父級加overflow:auto;

複製**

**如下:

清除浮動方法(6種)

浮動元素 float屬性 讓元素進行浮動 left 左浮動 right 右浮動 清除浮動元素屬性 clear屬性 清除浮動 left 在左側不允許浮動元素 right 在右側不允許浮動元素 both 在左 右兩側不允許浮動元素 none 預設值。允許浮動元素出現在兩側 為什麼要清除浮動 當子元素設定...

清除浮動的方法(6種)

方法1 增加標籤clear both 增加標籤 方法2 增加標籤 增加標籤 方法3 父容器使用 after偽元素清除浮動 父容器div增加class clearfix 方法4 父容器overflow hidden 或 父容器 auto 本質是用的bfc 什麼是bfc 父容器設定樣式overflow ...

HTML中清除浮動的三種方法

當父元素不設定高度,且子元素浮動時,會發生高度塌陷,解決辦法如下 1.給父元素新增overflow hidden 注 如果父元素上有定位,且定位在父元素之外,此方法不適用 2.最後乙個浮動元素的下方新增乙個空的div,並新增宣告 height 0 overflow hidden clear both...