清除浮動方法(6種)

2021-09-09 09:22:31 字數 1309 閱讀 1272

浮動元素**

float屬性:讓元素進行浮動

left 左浮動;

right 右浮動;

清除浮動元素屬性

clear屬性:清除浮動;

left 在左側不允許浮動元素;

right 在右側不允許浮動元素;

both 在左、右兩側不允許浮動元素;

none 預設值。允許浮動元素出現在兩側;

為什麼要清除浮動

當子元素設定了浮動,父元素就包含不住子元素了;

ps: 當子元素設定了浮動,一定要在父元素上清除浮動

浮動元素後面加空標籤→(「不推薦使用」)

給浮動元素的父級,增加浮動

缺點: 父元素也具有了浮動的屬性

就會產生

就會產生

就會產生

就會產生

就會產生

就會產生

就會產生

就會產生

給浮動元素的父級 設定高度

ps:高度清除浮動的問題:	

如果子元素的高度不是固定,就會產生問題。

就會產生

就會產生

需要使用到的**:

overflow: hidden; /*超出隱藏*/

如果當前子元素有定位的情況下,如果定位的元素超出了盒子,會隱藏掉超出的元素,

就會產生

推薦使用

使用到的清除浮動標籤是:

clear : left;(清除左邊浮動)

clear :right;(清除右邊浮動)

clear :both;(清除兩邊浮動)

``` ```使用到的定位標籤是:

position: absolute;(絕對定位)相對整個網頁進行定位

position:relative;(相對定位)相對需要定位元素原來位置進行定位

position:fixed;(固定定位)相對於螢幕進行定位

position:static;(預設樣式)

就會產生

清除浮動的方法(6種)

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

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

html清除浮動的6種方法示例 使用display inline block會出現的情況 1.使塊元素在一行顯示 2.使內嵌支援寬高 3.換行被解析了 4.不設定的時候寬度由內容撐開 5.在ie6,7下步支援塊標籤 由於inline block屬性換行的時候被解析 有間隙 故解決方法使用浮動floa...

清除浮動6中方法

使用display inline block會出現的情況 1.使塊元素在一行顯示 2.使內嵌支援寬高 3.換行被解析了 4.不設定的時候寬度由內容撐開 5.在ie6,7下步支援塊標籤 由於inline block屬性換行的時候被解析 有間隙 故解決方法使用浮動float left right 使用浮...