浮動元素特性：

為文字環繞效果而生、僅影響其后元素、能感知其后同胞兄弟、脫離文檔流、具有行內塊特性。

應用：

流式布局、自適應寬度、清除多余空隙。

（對于很多插件而言，浮動是個好特性）

缺點：脫離文檔流，使其父元素高度塌陷

影響到其后元素布局及其包裹層高度。

（可能出現的結果是布局亂、元素高度獲取不準確和重疊現象）

清除浮動：

1.浮層加寬度和overflow屬性

（缺點是限制了子層元素的擴展，即你不處理人家是默認的 visible ，你這么一弄變 hidden 了,但是用起來真的很爽。。）

width:200px;

overflow:hidden;

2.父層加偽類處理

（用一個對大局無影響的點處理受浮動影響的部分）

.wrap{

　　zoom:1

}

.wrap:after{

?　　clear:both;

　　display:block;

? ? ? ? ? content:"";??

? ? ? ? ? visibility:hidden;
? ? ? ? ? height:0

}

?3.浮動元素其后加? br? 標簽 或者文檔內位于浮動元素之后的標簽,加樣式：

clear：both；（left/right）

?

轉載于:https://www.cnblogs.com/justSmile2/p/9432341.html

總結

以上是生活随笔為你收集整理的浮动应用的全部內容，希望文章能夠幫你解決所遇到的問題。

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