清除浮动三种方法
html代码
<body>
<div class="outer">
<div ></div>
<div></div>
</div>
<div class="grey">
</div>
</body>
css：
.outer{
background-color: blue;
/* overflow: hidden; */
}
.outer ::after{
content: "";
display: block;
clear: both;
}
.outer :nth-child(1){
width: 50px;
height: 200px;
background-color: red;
float: left;
}
.outer :nth-child(2){
width: 200px;
height: 200px;
background-color: green;
float: left;
}
.grey{
background-color: grey;
width: 200px;
height: 200px;
float: left;
}
未清除之前：
（1）在需用清除浮动后面加入一个空盒子
<div style="clear: both;"></div>
（2）使用br
<br clear="all">
（3）父属性加入overflow: hidden;
（4）使用after伪类： 注意:: 前面不能有空格
.outer::after{
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
content:".";
height: 0px;
}
清除后：
3065
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
