1、浮动的作用
浮动在布局方面会起到很大作用,块级元素都是独占一行,要想让多个块级元素同一行展示,就需要浮动
2、浮动之后的影响
如果一个div1中的子div进行了浮动,而子div的高度不是事先确定好的,而是通过js动态提供的,这也就意味着,子div在页面加载之前是没有高度的,那么div1作为父元素,必然也不能直接写死一个高度(当父子元素高度不一致时,布局上会出现不理想的效果)
参考代码如下(未清除浮动):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动与清除浮动学习</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style>
#div1 {
border:2px solid orange;
background-color: red;
}
#son1 {
float: left;
margin-left:20px;
background-color: grey;
width: 20%;
}
#son2 {
float: right;
margin-right:20px;
background-color: green;
width: 30%;
}
</style>
<script>
$(function(){
var height = prompt("请输入子元素的高度")
$("#son1").height(height)
$("#son2").height(height-20)
})
</script>
</head>
<body>
<div id="div1">
<div id="son1">div1子元素1</div>
<div id="son2">div1子元素2</div>
</div>
<div style="border: 2px solid blue;">
我是div1的兄弟元素div2
</div>
</body>
</html>
假设子元素浮动后,不清除浮动,当输入子元素的高度为50后,看到的效果如下:
从上图可以看出,div1的高度为0,只出现了一个div1的边框,你可能会说,div1没有设置高度,肯定没有高度呀,但是div1有子div元素,子的div的高度理论上是会撑起来父元素的高度。
然而结果却没有,这是因为div1的子元素设置了浮动,浮动之后该元素脱离了文档流,它的高度与div1是没有关系的,那么此时div2作为兄弟元素,出现的位置在div1的下方其实就可以理解了,但是这种效果并不是我们希望看到的。
总结一下浮动带来的影响:
当某元素的高度不能直接写死,且其子元素设置了浮动,此时因为子元素脱离了文档流,它的高度是不能直接将父元素撑起来的,就会导致父元素在文档流中没有高度,然后被其兄弟元素占据位置,从而导致布局混乱的结果
3、解决浮动影响:清除浮动
基于上述浮动后的影响,要解决的问题就是:
子元素浮动后,子元素的高度要撑满其父元素,这样才可以使得父元素在文档流中的高度与其子元素是一样的,也就解决了出现布局错乱的情况
怎样让一个浮动元素的高度能撑起其父元素呢?
答案就是:添加清除浮动的代码
先看清除浮动后的效果:
从上图可以看出,div1的高度被子元素撑起来了,浮动带来的影响在清除浮动后已经消失了
清除浮动后的完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动与清除浮动学习</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style>
#div1 {
border:2px solid orange;
background-color: red;
}
#son1 {
float: left;
margin-left:20px;
background-color: grey;
width: 20%;
}
#son2 {
float: right;
margin-right:20px;
background-color: green;
width: 30%;
}
/*清除浮动代码*/
.clearfloat1 {
clear: both
}
</style>
<script>
$(function(){
var height = prompt("请输入子元素的高度")
$("#son1").height(height)
$("#son2").height(height-20)
})
</script>
</head>
<body>
<div id="div1" class="div1 clearfloat2">
<div id="son1">div1子元素1</div>
<div id="son2">div1子元素2</div>
<div class="clearfloat1"></div>
</div>
<div style="border: 2px solid blue;">
我是div1的兄弟元素div2
</div>
</body>
</html>