web开发中有几种清除浮动

这篇文章主要介绍了web开发中有几种清除浮动，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

子元素浮动会导致父元素盒子无法被撑开，导致父元素的样式无法显示，清除浮动的方法

原代码：

            
    
内容一
    
内容二

显示如下：

1、设置父元素高度：

height: 500px; /*设置父元素高度*/

            
    
内容一
    
内容二

2、父元素绝对定位：position:absolute;

            
    
内容一
    
内容二

3、父元素设置overflow：hidden

            
    
内容一
    
内容二

4、父元素设置浮动：float：left/right

            
    
内容一
    
内容二

5、在子元素最后添加一个空盒子，并设置样式为clear:both;

            
    
内容一
    
内容二
    

6、在父元素样式上添加一个伪类，相当于在子元素最后添加一个空盒子，原理与5类似

            
    
内容一
    
内容二

感谢你能够认真阅读完这篇文章，希望小编分享的"web开发中有几种清除浮动"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!