一、什么是浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
二、应用方法
1、传统方法
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[class^="item"]{
background-color:#f5f5f5;
display:block;
border: solid 1px black;
}
.left{
float: left;
}
.container{
background-color:#ff000052;
}
</style>
</head>
<body>
<div class="container">
<div class="item1 left">1</div>
<div class="item2 left">2</div>
<div class="item3 left">3</div>
<div class="item4 left">4</div>
<div class="item5 left">5</div>
<div class="item6 left">6</div>
<div style="clear:both"></div>
</div>
<div>7<div>
</body>
传统方法在每一个浮动的标签块沉底的时候增加一个div属性赋予clear:both,虽然可以实现,但是每一次都需要去写这个div。
结果:
2、灵活方法
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[class^="item"]{
background-color:#f5f5f5;
display:block;
border: solid 1px black;
}
.left{
float: left;
}
.container{
background-color:#ff000052;
}
.clearfix:after{
content:'.';
display:block;
clear:both;
visibility:hidden;
height:0;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="item1 left">1</div>
<div class="item2 left">2</div>
<div class="item3 left">3</div>
<div class="item4 left">4</div>
<div class="item5 left">5</div>
<div class="item6 left">6</div>
</div>
<div>7<div>
</body>