浮动副作用
当元素设置float浮动后,该元素就会脱离文档流并向左/向右浮动。浮动也会产生一些问题,所以在使用的时候还需要清除浮动,这样操作起来还是很麻烦的,在没有浮动的时候就不要乱使用,因为还需要清除掉,这样的操作还是很繁琐的。
浮动元素会造成父元素高度塌陷,后续元素会受到影响
在日后的布局当中是否都使用清除浮动的方式去布局,这样就不会有标准流的问题,只有在有需要的时候才使用浮动去解决。因为使用浮动也会产生一些问题。
就和吃药的道理是一样的,如果没有生病就不需要吃药,因为药也是有副作用的,浮动也是如此。
<!DOCTYPE html>
<html>
<head>
<title>使用CSS绝对定位absolute定位</title>
<style>
.container{
width: 500px;
height: 500px;
background-color: blueviolet;
}
.box1{
width: 100px;
height: 100px;
background-color: brown;
margin: 5px;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
margin: 5px;
}
.box3{
width: 100px;
height: 100px;
background-color: greenyellow;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
在一个灰色的大盒子里面有三个小盒子
如果将大盒子的高度height: 500px去掉,那么就是你内容所撑开的高度。如果宽度不设置就是全局宽度,因为块级元素默认就是100%的宽度。
如果将大盒子高度去掉,小盒子设置浮动,那么效果就没有了。
<!DOCTYPE html>
<html>
<head>
<title>使用CSS绝对定位absolute定位</title>
<style>
.container{
width: 500px;
background-color: blueviolet;
}
.box1{
width: 100px;
height: 100px;
background-color: brown;
margin: 5px;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
margin: 5px;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: greenyellow;
margin: 5px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
可以看到大盒子的宽度为0。此时大盒子高度为500,宽度为0。大盒子看不见了。这是因为浮动会造成父亲元素的高度塌陷,父元素不会被撑开了。
不仅父亲元素的高度塌陷,而且后续的元素也会受到影响。按道理来说,text元素是没有浮动的,没有浮动那么块级元素就是上下摆放,按道理就是在下面的位置。
<!DOCTYPE html>
<html>
<head>
<title>使用CSS绝对定位absolute定位</title>
<style>
.container{
width: 500px;
background-color: blueviolet;
}
.box1{
width: 100px;
height: 100px;
background-color: brown;
margin: 5px;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
margin: 5px;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: greenyellow;
margin: 5px;
float: left;
}
.text{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="text"></div>
</div>
</body>
</html>
可以看到还是被撑开了,有没有在下面。如果写在div的外面,也还是同样受到影响。
添加浮动了,并且也有高度,不像我们上面的高度为0.
这个时候就需要清除浮动了,
父亲元素设置高度,可以解决高度塌陷的问题。后续受到clean的元素可以使用clean属性进行解决。
<!DOCTYPE html>
<html>
<head>
<title>使用CSS绝对定位absolute定位</title>
<style>
.container{
width: 500px;
height: 500px;
background-color: blueviolet;
}
.box1{
width: 100px;
height: 100px;
background-color: brown;
margin: 5px;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
margin: 5px;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: greenyellow;
margin: 5px;
float: left;
}
.text{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="text"></div>
</body>
</html>
这样就是正常的,并且同级单独块级元素就被顶下来了,因为是同级关系,应该挨着它下面摆放。
如果放在里面还是被挡住了,因为元素压根没有放浮动,按道理来说块级别元素应该在下面摆放,而不是在后面被遮挡住。
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="text"></div>
</div>
text受到影响了,clean的属性是清除浮动 left清除左浮动,right清除右浮动。在真实开发的时候不一定是左浮动还是右浮动,可以选择both。无论是左浮动还是右浮动都清除掉。哪个子元素出现问题了就在哪个子元素下面添加both。
.text{
width: 100px;
height: 100px;
background-color: black;
clear: both;
}
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="text"></div>
</div>
</body>
父亲元素overflow: hidden clear: both两个属性要一起写,这种解决方案是日后使用比较广泛的一种解决方案。
<!DOCTYPE html>
<html>
<head>
<title>使用CSS绝对定位absolute定位</title>
<style>
.container{
overflow: hidden;
clear: both;
width: 500px;
background-color: blueviolet;
}
.box1{
width: 100px;
height: 100px;
background-color: brown;
margin: 5px;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
margin: 5px;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: greenyellow;
margin: 5px;
float: left;
}
.text{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="text"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>使用CSS绝对定位absolute定位</title>
<style>
.container{
width: 500px;
background-color: blueviolet;
}
.container::after{
content: "";
display: block;
clear: both;
}
.box1{
width: 100px;
height: 100px;
background-color: brown;
margin: 5px;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
margin: 5px;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: greenyellow;
margin: 5px;
float: left;
}
.text{
width: 100px;
height: 100px;
background-color: black;
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="text"></div>
</div>
</body>
</html>
清除浮动:如果造成了高度塌陷,如果方便设置就直接设置,如果不方便设置那么就要使用overflow hidden这种形式。
如果子元素受到影响分为里面和外面,如果是里面增加clean属性,如果在外面,那么之前的高度清除浮动,overflow和虚对象都可以默认将其撑下来了。(在里面需要增加clean)