float 撑起父层高度解决方法

最新推荐文章于 2024-02-13 13:25:24 发布

原创最新推荐文章于 2024-02-13 13:25:24 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

html/css/js 专栏收录该内容

17 篇文章

订阅专栏

网页开发中，使用float属性让子元素并排排列时，父元素高度无法撑起。解决方法有：给父层元素设置overflow：hidden；在父层元素结尾前用子元素设置clear:both；给父层元素加高度。

我们在网页开发时常常会遇到将多个元素并排排列的需求，一般我们对子元素用float 属性时都发现父元素高度无法被撑起

解决方法：

1.给父层元素设置 overflow：hidden

<div style="overflow:hidden">
   <div style="float:left;width:50%;height: 500px"></div>
   <div style="float:left;width:50%;height: 500px"></div>
</div>

2.在父层元素结尾前使用一个子元素设置 clear:both

<div>
   <div style="float:left;width:50%;height: 500px"></div>
   <div style="float:left;width:50%;height: 500px"></div>
   <div style="clear:both"></div>
</div>

3.给父层元素加高度