清除浮动三种方法
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;
}
清除后: