在CSS布局中float属性后会使其在普通流中脱离父容器，以下连提供解决办法：
1.clear清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clear float</title>
<style type="text/css">
.container{
margin: 30px auto;
width:600px;
height: 300px;
}
/* 第二种办法 */
.floatfix::after{
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: left;
}
.p{
border:solid 3px red;
}
.c{
width: 100px;
height: 100px;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="p">
<img class="c" src="avater.jpg"/>
<img class="c" src="avater.jpg"/>
<img class="c" src="avater.jpg"/>
<!-- 第一种办法结束地方加一个空元素 <div style="clear:left;"></div> -->
<div style="clear:left;"></div>
</div>
</div>
<div class="container">
<!-- 第二种办法 用为元素 after-->
<div class="p floatfix">
<img class="c" src="avater2.jpeg"/>
<img class="c" src="avater2.jpeg"/>
<img class="c" src="avater2.jpeg"/>
</div>
</div>
</body>
</html>
WechatIMG187.jpeg
1.clear清除浮动
- 第一种办法：结束地方加一个空元素 <div style="clear:left;"></div>
-
第二种办法：用为元素 after
效果图：
WechatIMG188.jpeg
2.使父容器形成BFC
- float为 left|right
- overflow为 hidden|auto|scroll
- display为 table-cell|table-caption|inline-block
- position为 absolute|fixed
我们可以对父容器添加这些属性来形成BFC达到“清浮动”效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clear float</title>
<style type="text/css">
.container{
margin: 30px auto;
width:600px;
height: 300px;
}
/* 第二种办法 start*/
.floatfix{
*zoom: 1;
}
.floatfix::after{
content: "";
display: table;
clear: both;
}
/* 第二种办法 end*/
.p{
border:solid 3px #a33;
}
.c{
width: 120px;
height: 100px;
background-color: #060;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<!-- 第一种 style="float: left;"-->
<div class="p" style="float: left;">
<div class="c">1</div>
<div class="c">2</div>
<div class="c">3</div>
</div>
</div>
<div class="container">
<!-- 第二种办法 -->
<div class="p floatfix">
<img class="c" src="avater3.jpeg"/>
<img class="c" src="avater3.jpeg"/>
<img class="c" src="avater3.jpeg"/>
</div>
</div>
</body>
</html>
WechatIMG189.jpeg
- 我们可以看到父容器高度没有塌陷，但是长度变短了，因为div应用float‘后会根据内容来改变长度，这个在很多时候很有用，但是我们不希望有这种效果怎么办？
- 在IE6、7使用hasLayout
.floatfix{
*zoom:1;
}
.floatfix:after{
content:"";
display:table;
clear:both;
}
效果图：
WechatIMG190.jpeg
