您的位置：首页 > Web前端 > CSS

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

2016-11-11 20:56 756 查看

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

解决方法：清除浮动

清除浮动的方式：

方法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时，会出现滚动条，所以如果你需要出现滚动条或保证你的代码不出现滚动条就是用吧。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 高度塌陷

相关文章推荐

新的分享

章节导航