css 清除浮动的几种方法

最新推荐文章于 2023-09-07 00:04:48 发布

郝静and静静

最新推荐文章于 2023-09-07 00:04:48 发布

阅读量264

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/u010705091/article/details/78560585

版权

前端开发专栏收录该内容

57 篇文章 0 订阅

订阅专栏

清除浮动
包括清除子元素的浮动和清除上级元素的浮动
其中，清除上级元素的浮动，只需设置clear为both就OK了，
而清除子元素的浮动则可以用空标签法、clearfix方法或overflow方法。而空标签法清除子元素浮动会增加额外标签。
一个块级元素如果没有设置height的大小，那么该元素的高度就是由里面的子元素来撑开的，如果子元素使用浮动，脱离了标准的文档流，那么父元素的高度会将其忽略，此时给父元素设置border或者background都得不到正确的解析

<div class="clearfix">
   <div style="background: red;width:100px;height:100px;float: left;"></div> 
   <div style="background: green;width:100px;height:100px;float: left;"></div> 
   <div style="background: blue;width:100px;height:100px;float: left;"></div>
</div>

方法一：增加一个空的div标签

<div class="clearfix">
   <div style="background: red;width:100px;height:100px;float: left;"></div> 
   <div style="background: green;width:100px;height:100px;float: left;"></div> 
   <div style="background: blue;width:100px;height:100px;float: left;"></div>
   <div style="clear:both"></div>
</div>

方法二：给父元素增加一个clearfix类
该clearfix类的样式为：

.clearfix:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }