float错误运用示例
当我编写两个div,其中一个被设置成浮动。第二个没有设置成浮动,只设置了一个宽度没有设置高度。并且在第二个div里再度编写三个div,三个div都设置浮动,成一排。
<style>
.box {
width: 500px;
border: 5px solid black;
}
.a1 {
height: 500px;
float: left;
width: 100%;
}
.a2 {
border: 5px solid yellow;
}
.content {
width: 100px;
height: 100px;
/* margin: 0 auto; */
}
.left {
border: 7px solid red;
float: left;
}
.center {
border: 7px solid green;
float: left;
}
.right {
border: 7px solid blue;
float: left;
}
</style>
</head>
<body>
<div class="box a1"></div>
<div class="box a2">
<div class="content left"></div>
<div class="content center"></div>
<div class="content right"></div>
</div>
</body>
效果图
如图所示,第二div缩成了一条黄线。
解决办法
1.在a2上面再添加一个div并设置clear的属性
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 500px;
border: 5px solid black;
}
.a1 {
height: 500px;
float: left;
width: 100%;
}
.a2 {
border: 5px solid yellow;
}
.content {
width: 100px;
height: 100px;
/* margin: 0 auto; */
}
.left {
border: 7px solid red;
float: left;
}
.center {
border: 7px solid green;
float: left;
}
.right {
border: 7px solid blue;
float: left;
}
/*清除浮动*/
.a3 {
clear: both;
}
</style>
</head>
<body>
<div class="box a1"></div>
<div class="a3"></div>
<div class="box a2">
<div class="content left"></div>
<div class="content center"></div>
<div class="content right"></div>
</div>
</body>
效果图
a2已经下来了,不过最好是设置一下高度。
2.给a2添加浮动
<style>
.box {
width: 500px;
border: 5px solid black;
}
.a1 {
height: 500px;
float: left;
width: 100%;
}
.a2 {
border: 5px solid yellow;
float: left;
}
.content {
width: 100px;
height: 100px;
/* margin: 0 auto; */
}
.left {
border: 7px solid red;
float: left;
}
.center {
border: 7px solid green;
float: left;
}
.right {
border: 7px solid blue;
float: left;
}
</style>
</head>
<body>
<div class="box a1"></div>
<div class="box a2">
<div class="content left"></div>
<div class="content center"></div>
<div class="content right"></div>
</div>
</body>
效果图
a2已经下来了并且有了宽度。
margin错误示例
创建两个div,命名为a2的要离a1的下边距50px的距离
<style>
.box {
width: 500px;
border: 5px solid black;
}
.a1 {
height: 500px;
width: 100%;
}
.a2 {
border: 5px solid yellow;
height: 100px;
margin-top: 50px;
margin: auto;
}
</style>
</head>
<body>
<div class="box a1"></div>
<div class="box a2">
</div>
</body>
效果图
如图所示,a2并没有向下平移50px
解决方法
把margin:auto;放到margin-top;的上面就行了
<style>
.box {
width: 500px;
border: 5px solid black;
}
.a1 {
height: 500px;
width: 100%;
}
.a2 {
border: 5px solid yellow;
height: 100px;
margin: auto;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="box a1"></div>
<div class="box a2">
</div>
</body>