清除浮動float的兩種常用方法

2021-08-04 03:02:39 字數 744 閱讀 6800

一、原頁面布局：

1、html**：
2、css樣式：

.box


.left


.right


.bottom
3、頁面顯示效果：

二、為了使class為bottom的div正常顯示在父級div的底部，需要新增屬性clear：both；

1、清除浮動的第一種方法：直接給class為bottom的div新增clear；

.box


.left


.right


.bottom
2、清除浮動的第二種方法：在class為bottom的div前新增乙個空的div並設定這個空div的clear值：

html**：
css樣式：

.box


.left


.right


.clear


.bottom
三、清除浮動後的頁面布局：

清除浮動最簡單的兩種方式

總結一下，使用float的話，需要清除浮動的兩種簡單方式 1.通過偽元素 測試1測試2 測試3123 通過偽元素是自我感覺質量比較高的清除浮動的一種方式，因為不再向dom中新增元素 其是通過sass和less開發中，清除浮動在重複性使用中會變得格外輕鬆 clearfix after box7編譯後結...

css清除浮動float的七種常用方法總結

在浮動元素下方新增空div,並給該元素寫css樣式 我們知道了高度塌陷是應為給浮動元素的父級高度是自適應導致的，那麼我們給它的設定適當的高度就可以解決這個問題了。缺點 在浮動元素高度不確定的時候不適用 何謂 以浮制浮 呢？就是 讓浮動元素的父級也浮動 缺點 需要給每個浮動元素父級新增浮動，浮動多了容...

細微之處 比較兩種CSS清除浮動的相容

清除浮動是連續浮動元素之後的必備工作，在工作中我做到需要清除浮動的地方都要清除。比如，我在瑞星的專案中一直這樣使用 clear after clear clear after clear clear,lc,topiclist,mediawrap,cellmod 2011 05 27 11 00 於安...