自丢网
标题:
三种清除浮动的样式方法案例教程附带代码
[打印本页]
作者:
admin
时间:
2020-4-23 14:03
标题:
三种清除浮动的样式方法案例教程附带代码
三种清除浮动的样式方法案例教程附带代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.one {
/* overflow: hidden; 第一种方法*/
width: 500px;
border: 1px solid red;
}
.damao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.ermao {
float: left;
width: 250px;
height: 200px;
background-color: #c5c;
}
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
zoom: 1;
/*第二种方法 ie6,7 专I ]清除浮动的样式*/
}
.two {
width: 200px;
height: 200px;
background-color: black;
}
</style>
<div class="one clearfix">
<div class="damao"></div>
<div class="ermao"></div>
</div>
<!-- <div style="clear: both;"></div> 第三种方法-->
<div class="two">
</div>
</body>
</html>
复制代码
欢迎光临 自丢网 (https://www.zidiu.com/)
Powered by Discuz! X3.5