清除浮動的常用方法

2021-10-02 08:28:55 字數 820 閱讀 2284

1.給浮動元素父級設定高度

2.在最後乙個浮動標籤後,新加乙個標籤,將其樣式設定為 clear:both;

3.在父級元素新增樣式 overflow:hidden; 此方法會將多出的內容裁切掉,無法顯示要溢位的元素

4.使用before和after雙偽元素清除浮動,使用偽元素清除浮動必須是塊級元素上使用

<

!doctype html>

"en"

>

"utf-8"

>

image<

/title>

* p

.clearfix:

:before,

.clearfix:

:after

<

/style>

<

/head>

"border:1px solid green;"

class

="clearfix"

>

"width:100px;height:100px;background:red;"

>

<

/p>

"width:100px;height:100px;background:red;"

>

<

/p>

"width:100px;height:100px;background:red;"

>

<

/p>

<

/div>

<

/body>

<

/html>

清除浮動的常用方法

先說不清除浮動的效果 給父元素這只邊框都不會把他們包裹起來,俗稱高度塌陷。然後說說幾個不常用的清除浮動方法,比如 style overflow hidden style float left div style float left div div 就是給父元素設定overflow屬性的那種,具體樣...

清除浮動的常用方法

方法一 對收到影響的元素進行設定,哪側受到浮動的影響就清除哪側,clear both clear left clear right 方法二 同時設定100 或固定寬度 overflow hidden 嘗試一下 如何使得p標籤內容跟div標籤的不同一行呢?doctype html html lang ...

常用的清除浮動的方法

此為未清除浮動源 執行 無法檢視到父級元素淺黃色背景。left right 三種清除浮動方法如下 1 使用空標籤清除浮動。我用了很久的一種方法,空標籤可以是div標籤,也可以是p標籤。我習慣用,夠簡短,也有很多人用,只是需要另外 為其清除邊框,但理論上可以是任何標籤。這種方式是在需要清除浮動的父級元...