《2018年10月31日》【连续392天】
标题:额外标签法和overflow清除浮动,伪元素清除浮动;
内容:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.clearfix:after { /*正常浏览器 清除浮动*/
content:"";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /* zoom 1 就是ie6 清除浮动方式 * ie7以下版本所识别 */
}
.father {
width: 400px;
border: 1px solid red;
/*overflow: hidden;*/
}
.big {
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: yellow;
float: right;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
/*额外标签法:clear:left/right/both*/
/*.clear {
clear: both;
}*/
</style>
</head>
<body>
<div class="father clearfix">
<div class="big"></div>
<div class="small"></div>
<!-- <div class="clear"></div> -->
</div>
<div class="footer">
</div>
</body>
/*双伪元素*/
.clearfix:before,
.clearfix:after { /*正常浏览器 清除浮动*/
content:"";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /* zoom 1 就是ie6 清除浮动方式 * ie7以下版本所识别 */
}