CSS中几种清除浮动法解决高度塌陷

最新推荐文章于 2024-08-11 11:01:02 发布

Leon_94

最新推荐文章于 2024-08-11 11:01:02 发布

阅读量1.1k

点赞数 2

分类专栏： css 文章标签： css 高度塌陷

本文链接：https://blog.csdn.net/sinat_36422236/article/details/53133057

版权

css 专栏收录该内容

9 篇文章 3 订阅

订阅专栏

问题出现原因：当我们给子元素设置了浮动，但是没有给父元素设置高度时，就会出现高度塌陷问题。

解决方法：清除浮动

清除浮动的方式：

方法1.给父元素设置高度

<style type="text/css"> 
*{
   margin: 0;
   padding: 0;
}
.box1{
   background-color: #0f2;
   width: 100%;
   margin-bottom: 20px;
   /*清除浮动代码*/
   height: 210px;
}
.left{
   height: 120px;
   width: 200px;
   background-color: #aaa;
   float: left;
}
.right{
   height: 210px;
   width: 200px;
   background-color: #763;
   float: left;
}

.box2{
   width: 100%;
   height: 150px;
   background-color: #15d;
}
</style> 
<body>
   <div class='box1'>
      <div class='left'>left</div>
      <div class='right'>right</div>
   </div>

   <div class='box2'>test</div>
</body>

方法2.在结尾处添加新的div标签clear：both

说明：这种情况最好在高度固定的布局时才使用，一般不建议使用

<style type="text/css"> 
*{
   margin: 0;
   padding: 0;
}
.box1{
   background-color: #0f2;
   width: 100%;
   margin-bottom: 20px;
   /*清除浮动代码1*/
   /*height: 210px;*/
}
.left{
   height: 120px;
   width: 200px;
   background-color: #aaa;
   float: left;
}
.right{
   height: 210px;
   width: 200px;
   background-color: #763;
   float: left;
}

.box2{
   width: 100%;
   height: 150px;
   background-color: #15d;
}
/*清除浮动代码1*/
.clear{
   clear: both;
}
</style> 
<body>
   <div class='box1'>
      <div class='left'>left</div>
      <div class='right'>right</div>
      <div class='clear'></div><!-- 清除浮动 -->
   </div>

   <div class='box2'>test</div>
</body>

说明：虽然这种方式的代码比较少，比较简单，但是如果页面浮动布局多，就要增加很多空的div，浪费了标签，让人很不爽

方法三：父级div定义伪类：after和zoom

<style type="text/css"> 
*{
   margin: 0;
   padding: 0;
}
.box1{
   background-color: #0f2;
   width: 100%;
   margin-bottom: 20px;
}
.left{
   height: 120px;
   width: 200px;
   background-color: #aaa;
   float: left;
}
.right{
   height: 210px;
   width: 200px;
   background-color: #763;
   float: left;
}

.box2{
   width: 100%;
   height: 150px;
   background-color: #15d;
}
/*清除浮动代码*/
.clear:after{
   display: block;
   clear: both;
   content: "";
   height: 0;
   visibility: hidden;
}
.clear{
   zoom:1;
}
</style> 
<body>
   <div class='box1 clear'>
      <div class='left'>left</div>
      <div class='right'>right</div>
   </div>

   <div class='box2'>test</div>
</body>

说明：这种方法浏览器支持比较好，不容易出现大问题。目前的一些大型网站比如（腾讯，网易，新浪）都在使用这种方法。

方法四：给父元素设置overflow：hidden;

<style type="text/css"> 
*{
   margin: 0;
   padding: 0;
}
.box1{
   background-color: #0f2;
   width: 100%;
   margin-bottom: 20px;
   /*清除浮动代码*/
   overflow: hidden;
}
.left{
   height: 120px;
   width: 200px;
   background-color: #aaa;
   float: left;
}
.right{
   height: 210px;
   width: 200px;
   background-color: #763;
   float: left;
}

.box2{
   width: 100%;
   height: 150px;
   background-color: #15d;
}

</style> 
<body>
   <div class='box1'>
      <div class='left'>left</div>
      <div class='right'>right</div>
   </div>

   <div class='box2'>test</div>
</body>

说明：不能和position配合使用，因为超出的尺寸会被隐藏

方法五：父级div定义overflow：auto

<style type="text/css"> 
*{
   margin: 0;
   padding: 0;
}
.box1{
   background-color: #0f2;
   width: 100%;
   margin-bottom: 20px;
   /*清除浮动代码*/
   overflow: auto;
}
.left{
   height: 120px;
   width: 200px;
   background-color: #aaa;
   float: left;
}
.right{
   height: 210px;
   width: 200px;
   background-color: #763;
   float: left;
}

.box2{
   width: 100%;
   height: 150px;
   background-color: #15d;
}

</style> 
<body>
   <div class='box1'>
      <div class='left'>left</div>
      <div class='right'>right</div>
   </div>

   <div class='box2'>test</div>
</body>