三種方法解決浮動元素父容器高度自適應問題
浮動元素由於脫離了文件流,無法撐起其父元素的高度,如果父元素要顯示背景或邊框時就不能置之不理了。使浮動元素的父容器自適應高度的方法有三種:
方法一:讓浮動元素後面緊跟一個用於清除浮動的空標籤。完整程式碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>clearfix</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-CN" /> <style type="text/css"> .area{background:#ccc;}/*定義父容器背景顏色,以便於觀察*/ .fl{float:left;background:#FFDF00;} .cb{clear:both;} </style> </head> <body> <div class="area"> <div class="fl">floater</div> <div class="cb"></div> </div> </body> </html>
缺點:增加了一個空標籤,破壞了語義化。
方法二:給父容器加上一個特殊的class,直接從父容器清除浮動元素的浮動。完整程式碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>clearfix</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-CN" /> <style type="text/css"> .area{background:#ccc;}/*定義父容器背景顏色,以便於觀察;定義寬度,使其在IE下高度自適應*/ .clearfix:after{height:0px;visibility:hidden;content:".";clear:both;display:block;} .fl{float:left;background:#FFDF00;} .clearfix {display:inline-block;}/* 對Mac上的IE瀏覽器進行的處理 */ * html .clearfix{height:1%}/* 對win上的IE瀏覽器進行的處理 */ .clearfix {display:block;}/* 對display: inline-block;進行的修改,重置為區塊元素*/ </style> </head> <body> <div class="area clearfix"> <div class="fl">floater</div> </div> </body> </html>
方法三:在方法二的基礎上進行改進。完整程式碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>clearfix</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-CN" /> <style type="text/css"> .area{background:#ccc;width:960px;}/*定義父容器背景顏色,以便於觀察;定義寬度,使其在IE下高度自適應*/ .clearfix:after{height:0px;visibility:hidden;content:".";clear:both;display:block;} .fl{float:left;background:#FFDF00;} </style> </head> <body> <div class="area clearfix"> <div class="fl">floater</div> </div> </body> </html>
相關文章
- li浮動時ul高度為0,解決ul自適應高度的幾種方法
- 解決子元素浮動,父元素沒有撐開的問題
- 真正解決iframe高度自適應問題
- 浮動元素容器的clearing問題
- js獲取iframe和父級之間元素,方法、屬,獲取iframe的高度自適應iframe高度JS
- iframe高度自適應解決方案
- 根據螢幕高度自適應元素高度
- CSS圍住浮動元素的三種方法CSS
- (中級)圍住浮動元素的三種方法
- 子元素浮動導致父元素沒有被撐開解決方案
- css浮動元素寬度根據內容自適應CSS
- textarea高度自適應詳解
- 淺談CSS中浮動float帶來的高度塌陷問題及4種解決方案CSS
- css高度塌陷問題解決方法CSS
- iframe之間通訊問題及iframe自適應高度問題
- 自動載入的iframe高度自適應
- 微信小程式swiper高度自適應,swiper的子元素高度不固定微信小程式
- 浮動元素引起的問題和解決辦法?
- 浮動元素引起的問題和解決辦法
- 解決代理超時問題的三種方法
- 父DIV的高度不能根據子DIV自動變化的解決
- 父元素沒有被撐開塌陷問題解決方案
- html iframe高度自適應HTML
- TabelViewCell高度自適應View
- 解決高度塌陷問題
- 最新Iframe全瀏覽器相容自適應高度解決方案瀏覽器
- html 子元素div影響父元素高度HTML
- UITableViewCell含有WebView的自適應高度新解決方案UIWebView
- 高度塌陷 解決高度塌陷 導航條 清除浮動 相對定位
- 小程式Swiper高度自適應
- iframe 跨域高度自適應跨域
- jQuery textarea框高度自適應jQuery
- UITableViewCell自適應圖片高度UIView
- 解決高度塌陷、定位問題
- 問題解決方法有三
- ExtJS Tab裡放Grid高度自適應問題,官方Perfect方案。JS
- vue移動端的自適應佈局的兩種解決方案Vue
- iframe自適應高度的外掛