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

来源：互联网发布：scratch软件编辑：程序博客网时间：2024/05/29 02:18

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

解决方法：清除浮动

清除浮动的方式：

方法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>

说明：当内部宽高超过父级div时，会出现滚动条，所以如果你需要出现滚动条或保证你的代码不出现滚动条就是用吧。

1 0