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

CSS样式之去除浮动

2017-12-15 14:15 197 查看

CSS样式之去除浮动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0px;
padding: 0px;
}
.box{
width: 600px;
height: 600px;
margin: 20px auto;
}
.title{
height: 100px;
background: palegoldenrod;
}
.centet{
margin: 10px 0px;
/* 浮动处理方法 父元素加属性overflow: hidden;
* 如果有内容出去了盒子  不能使用这个方法，会裁剪掉
*/
/*overflow: hidden;*/
}
.centet .left{
height: 380px;
width: 400px;
background: palevioletred;
float: left;
}
.centet .right{
height: 380px;
width: 190px;
background: pink;
float: right;
}
.footer{
height: 100px;
background: paleturquoise;
}

.clearFix:after{
content: "";
display: block;
height: 0px;
line-height: 0px;
visibility: hidden;
clear: both;
}
/*兼容ie*/
.clearFix{
zoom: 1;
}

</style>
</head>
<body>
<div class="box">
<div class="title">

</div>
<div class="centet clearFix">
<div class="left"></div>
<div class="right"></div>
<!--额外标签法:去除浮动-->
<!--<div style="clear: both;"></div>-->
</div>

<div class="footer"></div>
</div>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css
相关文章推荐
新的分享
章节导航