三種方法解決浮動元素父容器高度自適應問題

webstandards發表於2020-04-04

浮動元素由於脫離了文件流，無法撐起其父元素的高度，如果父元素要顯示背景或邊框時就不能置之不理了。使浮動元素的父容器自適應高度的方法有三種：

方法一：讓浮動元素後面緊跟一個用於清除浮動的空標籤。完整程式碼：

<!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>

相關文章