浮动练习与清除浮动
程序员文章站
2022-04-24 21:56:20
...
浮动练习
浮动练习：在一个大盒子里面整齐的摆放如下图所示的图形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动作业</title>
<style type="text/css">
.box{
width: 1000px;
margin: 0 auto;
}
div div{
font: 900 30px/100px 'STSong';
color: #fff;
text-align: center;
width: 200px;
height: 100px;
background-color: green;
float: left;
box-sizing:border-box;
border:1px solid red;
}
.box .b6{
width: 600px;
background-color: yellow;
}
.box .b7{
float: right;
width: 400px;
height: 200px;
line-height: 200px;
background-color: pink；
}
.box .b8{
float: left;
width: 300px;
height: 150px;
line-height: 150px;
color:black;
background-color: white;
}
.box .b9{
float: left;
width: 300px;
height: 150px;
line-height: 150px;
background-color: black;
}
.box .b10{
float: right;
width: 400px;
height: 150px;
line-height: 150px;
background-color: skyblue;
}
.b11{
float: left;
width: 600px;
height: 100px;
line-height:100px;
background-color: red;
}
.b12{
width: 1000px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="b1">1</div>
<div class="b2">2</div>
<div class="b3">3</div>
<div class="b4">4</div>
<div class="b5">5</div>
<div class="b6">6</div>
<div class="b7">7</div>
<div class="b8">8</div>
<div class="b9">9</div>
<div class="b10">10</div>
<div class="b11">11</div>
<div class="b12">12</div>
</body>
</html>
清除浮动
清除浮动的原因：当在父盒子里面摆放了若干的浮动的盒子，当你在当前父盒子的下面想要插入下一个盒子的时候，由于父盒子里的孩子因浮动导致高为0进而导致下一个盒子会紧挨着高为0的当前父盒子被盖在下面。
解决：清除浮动,利用伪元素来清除浮动，如下代码。
.clearfix:after{
display: block;
content: "";
clear: both;
visibility:hidden;
}
.clearfix{
*zoom: 1;
}
将上一个盒子的下方插入另一个盒子练习清除浮动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动作业</title>
<style type="text/css">
.box{
width: 1000px;
margin: 0 auto;
}
.clearfix:after{
display: block;
content: "";
clear: both;
visibility:hidden;
}
.clearfix{
*zoom: 1;
}
div div{
font: 900 30px/100px 'STSong';
color: #fff;
text-align: center;
width: 200px;
height: 100px;
background-color: green;
float: left;
box-sizing:border-box;
border:1px solid red;
}
.box .b6{
width: 600px;
background-color: yellow;
}
.box .b7{
float: right;
width: 400px;
height: 200px;
line-height: 200px;
background-color: pink；
}
.box .b8{
float: left;
width: 300px;
height: 150px;
line-height: 150px;
color:black;
background-color: white;
}
.box .b9{
float: left;
width: 300px;
height: 150px;
line-height: 150px;
background-color: black;
}
.box .b10{
float: right;
width: 400px;
height: 150px;
line-height: 150px;
background-color: skyblue;
}
.b11{
float: left;
width: 600px;
height: 100px;
line-height:100px;
background-color: red;
}
.b12{
width: 1000px;
background-color: blue;
}
.box1{
width:1200px;
height: 100px;
background-color: pink;
margin:0 auto;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="b1">1</div>
<div class="b2">2</div>
<div class="b3">3</div>
<div class="b4">4</div>
<div class="b5">5</div>
<div class="b6">6</div>
<div class="b7">7</div>
<div class="b8">8</div>
<div class="b9">9</div>
<div class="b10">10</div>
<div class="b11">11</div>
<div class="b12">12</div>
</div>
<div class="box1"></div>
</body>
</html>