在前一篇文章(https://blog.csdn.net/liubangbo/article/details/104129203)中,我们分析了由于父元素没有设置高度,子元素进行了浮动,所以实现了文字环绕效果(父元素高度塌陷)。这篇文章我们分析一下怎么清除浮动产生的影响(父元素高度塌陷)。
方法1:在子元素后边添加一个空div元素,并设置clear属性
<html>
<head>
<style type="text/css">
.div1{
width: 200px;
outline: 2px red solid;
}
.div2{
width: 100px;
height: 200px;
background-color: royalblue;
float: left;
}
.empty{
clear: left;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div>text</div>
<div class="empty"></div>
</div>
<script>
</script>
</body>
</html>
渲染出的效果如下:
在子元素最后新添加一个空容器,并且设置了clear属性为left,在这个空容器的左边有两个兄弟节点,并且第一个兄弟节点是左浮动的,所以这个空容器就另起一行显示,保证自己的左边没有浮动元素。由于浮动元素有包裹性,所以这个左浮动元素撑开了父元素,就出现了我们上边看到的效果。
这种方法的缺点也显而易见,多添加了一个dom节点,我们都知道创建dom节点是耗时的。
方法二:给父元素添加一个伪元素,并设置这个伪元素的content为空,display属性为block,clear属性为left
代码如下:
<html>
<head>
<style type="text/css">
.div1{
width: 200px;
outline: 2px red solid;
}
.div1:after{
content: "";
display: block;
clear: left;
}
.div2{
width: 100px;
height: 200px;
background-color: royalblue;
float: left;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div>text</div>
</div>
<script>
</script>
</body>
</html>
同样能达到相同的清除左浮动的效果。其实这和第一种方法类似。给父元素添加的伪元素会在子元素的最后进行显示,把这个伪元素的display属性要设置为block,使其以块级元素显示(默认是以行级元素显示的),并设置clear属性为left,让其左边没有浮动元素显示,并且content为空。这样浮动元素就把父元素高度撑开了,并且看不到有伪元素显示。