我们在使用float的时候可能会遇见这种问题
那条黑线其实是红、黄、蓝这三个div的父级容器的边框,粉色为这个父级元素下面的一个div
解决这个问题的五种方法:
1、浮动元素后使用一个空元素
<div class="clear"></div>
.clear
{
clear:both;
}
2、给浮动元素的容器添加overfloat :hidden
.box{
border: 1px solid;
overflow: hidden;
}
3、给浮动元素的容器添加个类clearfix ,这个和第一种方法类似。
.clearfix:after{
content: ".";
height: 0;
display: block;
visibility: hidden;
clear: both;
zoom: 1;
}
4、给父级元素定义一个height
border: 1px solid;
height: 100px;
5、让父级元素也一起浮动,不推荐
.box{
border: 1px solid;
float: left;
}
下面使最上面图片的代码,感兴趣的可以根据上面的五种方法进行调试。
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style type="text/css">
.box{
border: 1px solid;
}
.box1{
background-color: red;
float: left;
width: 100px;
height: 100px;
}
.box2{
background-color: yellow;
float: left;
width: 100px;
height: 100px;
}
.box3{
background-color: blue;
float: left;
width: 100px;
height: 100px;
}
.box4{
background-color: darksalmon;
width: 500px;
height: 200px;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="box1">111</div>
<div class="box2">222</div>
<div class="box3">333</div>
</div>
<div class="box4"></div>
</body>
</html>