前端学习（310）：清除浮动的方法
生活随笔
收集整理的這篇文章主要介紹了
前端学习（310）：清除浮动的方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
我們經常把高度塌陷問題也叫做常見的幾種清除浮動的方法
?
高度塌陷問題—父元素高度自適應，子元素float后，造成父元素高度為0，就叫做高度塌陷問題
?
?給父元素一個高度
?
缺點：無法高度自適應
?父元素{overflow:hidden;}
缺點： 父元素框之外的部分會被隱藏
?在浮動的子元素的末尾，添加一個空div，并設置如下樣式
div{clear:both; height:0;overflow:hidden;}??? 缺點：容易造成代碼冗余
?萬能清除浮動法
父元素:after{content:””;display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>清除浮動的方法</title><style>*{margin: 0;padding: 0;}/* 方法一給父元素加一個高度 *//* .box{width: 600px;padding: 10px;background: gray;margin: 50px;height: 300px;} *//* 方法二 給父元素添加overflow-hidden 塊級格式化上下文*//* .box{width: 600px;padding: 10px;background: gray;margin: 50px;overflow: hidden;} *//* 方法三末尾加一個空的div */.box{width: 600px;padding: 10px;background: gray;margin: 50px;}.childDiv{width: 200px;height: 300px;float: left;position: relative;left: 0;top: -50px;}.childDiv:nth-child(1){background: red;}.childDiv:nth-child(2){background: blue;}.childDiv:nth-child(3){background:pink;}/* 為了兼容ie: 6;的問題 *//* .clear{clear: both;height: 0;overflow: hidden;} *//* 方法四偽元素 */.box:after{content: "";display: block;clear: both;height: 0;overflow: hidden;/* 空間在 內容不顯示 */visibility: hidden;}</style> </head> <body><div class="box"><div class="childDiv"></div><div class="childDiv"></div><div class="childDiv"></div><!-- <div class="clear"></div> --></div> </body> </html>運行結果
總結
以上是生活随笔為你收集整理的前端学习（310）：清除浮动的方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java网络编程2---Socket-T
- 下一篇： 前端学习（478）：前端简介2