子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题

最新推荐文章于 2023-06-01 17:09:56 发布

坚定了坚定

最新推荐文章于 2023-06-01 17:09:56 发布

阅读量891

点赞数

方法一：

html：

</div>

css：

#left1{ float:left;width:200px;}

#left2{ float:left;width:200px;}

#all1{}

这个方法的关键在于用了clear:both来清除了浮动元素，把父元素all1撑开。
方法二： html：

<div class="bb">sffsssssssssssss</div>

<div class="cc">sffss</div>

</div>

css：

.aa{ border:1px solid #000; background:#CC4;overflow:hidden;}

.bb { border:1px solid #f00; background:#999; float:left;}

.cc{ border:1px solid #f00; background:#999; float:left;}

此方法的重点在于，子元素有float之后，父元素需要设置一个overflow:hidden;，这样就可以自动撑开父元素aa。

特别注释：

overflow:hidden要有宽度或者高度才会溢出部分隐藏，如果外部盒子没有宽度或者高度，里面又是浮动元素，就会被撑开

总结如上的方法，各有适合的地方。比如overflow:hidden之后，超出父元素位置的子元素就看不到了，可以试一下如下的两段代码对比一下，

代码一：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

.aa{ border:1px solid #000; background:#CC4;overflow:hidden;}

.bb { border:1px solid #f00; background:#999; float:left; margin-top:-10px;margin-left:110px;}

.cc{ border:1px solid #f00; background:#999; float:left;}

</style>

<body>

</div>

</body>

</html>

代码二：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

.aa{ border:1px solid #000; background:#CC4;}

.bb { border:1px solid #f00; background:#999; float:left; margin-top:-10px;margin-left:110px;}

.cc{ border:1px solid #f00; background:#999; float:left;}

</style>

<body>

</div>

</body>

</html>

坚定了坚定

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题

方法一：html：11css：#left1{ float:left;width:200px;}#left2{ float:left;width:200px;}#all1{}这个方法的关键在于用了clear:both来清除了浮动元素，把父元素all1撑开。方法二：html： sf
复制链接

扫一扫