三种方法解决浮动元素父容器高度自适应问题

最新推荐文章于 2023-03-26 22:15:22 发布

webstandards

最新推荐文章于 2023-03-26 22:15:22 发布

阅读量1.1k

点赞数 1

分类专栏： HTML/CSS

本文链接：https://blog.csdn.net/webstas/article/details/46507187

版权

HTML/CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

浮动元素由于脱离了文档流，无法撑起其父元素的高度，如果父元素要显示背景或边框时就不能置之不理了。使浮动元素的父容器自适应高度的方法有三种：

方法一：让浮动元素后面紧跟一个用于清除浮动的空标签。完整代码：

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

webstandards

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三种方法解决浮动元素父容器高度自适应问题

浮动元素由于脱离了文档流，无法撑起其父元素的高度，如果父元素要显示背景或边框时就不能置之不理了。使浮动元素的父容器自适应高度的方法有三种：方法一：让浮动元素后面紧跟一个用于清除浮动的空标签。完整代码：DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
复制链接

扫一扫

专栏目录