清除浮动元素影响的两种方法

最新推荐文章于 2022-06-30 13:57:46 发布

夜跑者

最新推荐文章于 2022-06-30 13:57:46 发布

阅读量790

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/liubangbo/article/details/104132006

版权

CSS 专栏收录该内容

46 篇文章 1 订阅

订阅专栏

在前一篇文章(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为空。这样浮动元素就把父元素高度撑开了，并且看不到有伪元素显示。

夜跑者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除浮动元素影响的两种方法

在前一篇文章(https://blog.csdn.net/liubangbo/article/details/104129203)中，我们分析了由于父元素没有设置高度，子元素进行了浮动，所以实现了文字环绕效果(父元素高度塌陷)。这篇文章我们分析一下怎么清除浮动产生的影响(父元素高度塌陷)。方法1：在子元素后边添加一个空div元素，并设置clear属性<html> <...
复制链接

扫一扫