清除元素的浮动和解决元素高度塌陷的问题
Clear:left,right,both,none;表示清除元素浮动带来的影响;
Both:清除对其影响最大的浮动元素,不是都清除
一共三种方法,第一种直接使用overflow(但是会有一些副作用),zoom:1兼容IE6
第二:添加一个DIV利用clear间接的解决。
第三:使用伪类在CSS中解决
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.box1{
border: solid 1px red;
/*display: inline-block;可以解决但会造成宽度的丢失*/
/*解决方法一overflow: hidden;zoom:1 兼容IE6游览器*/
/*overflow: hidden;*/
}
.box2{
width:100px ;
height: 100px;
background-color: greenyellow;
float: left;
/*由于子元素的浮动,造成父元素的高度塌陷,因为父元素在文档流中默认被子元素撑开*/
}
/*.box4{
clear: both;
解决方法2添加一个div元素,清除由于子元素浮动对父元素造成的影响
但是使用的是HTML,会多加入一个结构;
}*/
.clearfix:after{
content:" ";
display: block;
clear: left;
zoom:1;
/*利用CSS样式解决高度塌陷的问题*/
}
</style>
<title></title>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>