Float引起div自适应高度无效的解决办法

最新推荐文章于 2023-02-02 22:17:40 发布

Tertiary_grass

最新推荐文章于 2023-02-02 22:17:40 发布

阅读量3.8k

点赞数

分类专栏： HTML5 & CSS3 HTML & CSS 文章标签： Float 浮动自适应父元素子元素

本文链接：https://blog.csdn.net/a1217158716/article/details/71168271

版权

HTML & CSS 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

HTML5 & CSS3

5 篇文章 0 订阅

订阅专栏

Float引起div自适应高度无效的解决办法。

一、当子元素在正常的文档流中时

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三生草</title>
<style type="text/css">
#ss{
border:2px solid yellow;
width:400px;
}
#sr{
background:red;
width:200px;
height:100px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="ss">
<div id="sr"></div>
</div>
</body>
</html>

上面的父元素的高度随着子元素的高度变大而变大。当子元素在正常的文档流中。所以子元素能够将父元素撑开。即父元素的高度可根据子元素的高度自适应。效果图如下：

二、当子元素加上浮动时

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三生草</title>
<style type="text/css">
#ss{
border:2px solid yellow;
width:400px;
}
#sr{
background:red;
width:200px;
float:left;
height:100px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="ss">
<div id="sr"></div>
</div>
</body>
</html>

上面的父元素没有被子元素撑开，即父元素没有根据子元素自动调节高度，这是因为子元素float属性设置为left，从而脱离了文档流。效果图如下：

三、Float引起div自适应高度解决办法。

方法一：如果父元素没有设置高度，那么我们可以在父元素中添加：“overflow:hidden;”来清除浮动，即可通过浮动元素撑开父元素。
#ss{
border:2px solid yellow;
width:400px;
overflow:hidden;
}
#sr{
background:red;
width:200px;
float:left;
height:100px;
margin:0 auto;
}

效果图如下：

方法二：如果父元素固定了高度，但是还要实现高度的自适应。那么可以添加如下代码即可：
#ss{
border:2px solid yellow;
width:400px;
height:200px;
min-height:200px;
height:auto!important;
}
#sr{
background:red;
width:200px;
float:left;
height:100px;
margin:0 auto;
}

效果图如下：

Tertiary_grass

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Float引起div自适应高度无效的解决办法

Float引起div自适应高度无效的解决办法。一、当子元素在正常的文档流中时三生草#ss{border:2px solid yellow;width:400px;}#sr{background:red;width:200px;height:100px;margin:0 auto;}上面的父元
复制链接

扫一扫