子元素使用float后使父元素有高度的方法_codestorm_新浪博客

原创于 2015-05-12 13:02:20 发布 · 83 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #js #python #java

本文介绍了一种简化HTML布局的方法，通过给父元素添加overflow:hidden;属性，避免了传统布局中的繁琐步骤，使页面设计更加高效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自：http://www.xiaoboy.com/detail/1341545045.html

一般我们会这样写HTML代码：

1

2

3

 
          <</code>div>
        
         <</code>div  style="float:left;">test</</code>div>
        
          </</code>div>

这样往往使得父级DIV没有高度，一般我们可以通过以下几种方法使得父级DIV也有高度：

1、给父级DIV也加上float；

2、给父级DIV加上height；

3、在子级DIV后面加上，即清除浮动。

上面的方法中，可能第三种用的多一点（至少我是这样的），昨天发现原来还有一个更简单的方法，就是给父元素加上overflow:hidden;属性，代码如下：

1

2

3

 
          <</code>div  style="overflow:hidden;">
        
         <</code>div  style="float:left;">test</</code>div>
        
          </</code>div>